1. form 양식에는 summit버튼만 누르면 name만으로 잘 controller에 전송이되는데 할꺼냐 말꺼냐 confirm할경우에 버튼의 속성을 summit아니고 단순 button으로 했더니 잘가던 네임값이 전송이 안되어서 추가했다.
function fn_detailUser(){
if(confirm(name + "님의 정보를 삭제하시겠습니까? 취소불가합니다.")){
let form = $("form");
var action_mode = $("<input>").attr("type", "hidden").attr("name", "action_mode").val("delete");
form.append(action_mode);
form.submit();
}
}
문제는 어쩌다 본문한개를 콜백으로 화면 변경하여 데이터를 불러 왔더니 js가 안먹히는 겁니다.
아무것도.....그 어떤것도.......왜그런줄 몰랐는데 초고수님 말씀!!!
자바스크립트는 순차적으로 로딩~~~메인의 자바스크립트는 이미 불러왔는데 이후 불러온 본문jsp파일을 읽고 처리할 스크립트 적용 처리 없이 그냥 불러오니 이미 적용된 메인의 js가 안먹힌다......였어요..
그래서 메인의 js파일에서 본문의 b.jsp파일을 함수로 불러오면 먹히겠금 구성하였는데
그럼 파일을 다시 불러올때 불필요한 가비지 데이터가 생긴다.......... 사실 이부분도 어렵습니다...일단 기록!
이걸 해결하는 것이 클로저!
클로저란 ? 내부 함수가 정의 될 때 외부 함수의 환경을 기억하고 있는 내부함수를 말함/ 외부 함숴 안에서 선언된 내부 함수는 그 외부 함수의 지역 변수나 함수에 접근하여 사용할 수 있음.
클로저 함수의 기본 형태.
//외부 함수
function closuer(){
var count = 0; //변수 정의
function inner(){ // 내부 함수(클로저)선언
return count++;
}
return inner(); // 내부 함수 반환
}
//익명 함수를 이용하는 방법
function closure(){
var count = 0;
return function(){ //익명 함수(클로저) 반환
return count++;
}
}
클로저 함수 호출 예시
function outter(){ //외부 함수
var data = 1;
function inner(){ //내부 함수
return data;
}
return inner();
}
var fucnt = outter();
console.log(func)
값은 1이다.
원래는 outter 함수를 호출하지 않았기 때문에 지역변수 data는 사용하지 못하는 것이 일반적이지만 자바스크립트에서는 사용할수 있다는 것이 특이한 점이다.
또한 전역 변수를 대체하여 클로저를 사용할 수 있어서 전역 변수의 남용을 막을 수 있고 변수 값을 은닉하는 용도로도 사용 할 수 있다.
어휘적 환경(Lexical Environment)
function makeAddr(x){
return function(y){
retrun x+Y;
}
}
const add3 = makeAdder(3); //x = 3
console.log(add3(2)); //5 ;; y = 2 add함수가 생성된 이후에도
상위함수인 makeAdder의 x에 접근(기억)
const add10 = makeAdderA(10); //x = 10
console.log(add10(5)); //15
console.log(add3(1)); //4
add10과 add3은 다른 환경의 함수임으로 결국 결국 두 함수의 x 의 값은 다르다.
하지만 x의 값을 값자기 100이나 99 변경할수는 없다....add함수의 증감만 있을 뿐....이것을 은닉화!... 인것 같다^^
일부만 발최함........ 첨부파일을 저장시 먼저 임시 id를 얻어야 해서 ajax로 진행
var formData = new FormData($('form[name=noticeForm]')[0]);
formData += $("form[name=noticeForm]").serialize();
$.ajax({
type : 'post',
url : 'mg/board/goBoardInfoPop.do',
enctype : 'multipart/form-data',
data : formData,
processData: false,
contentType:false,
cache: false,
timeout: 600000,
success : function(data){
alert('공지사항을 등록하였습니다!');
Notice_write(data);
},
error : function(e){
alert('파일 등록 실패하였습니다.');
}
});
}
html form을 대체하는 FormData객체///// jsp본문의 form과는 별개이다.
이걸하면서 몇가지 필요한 함수 더 확인해 본다.
let formData = new FormData(); // 새로운 폼 객체 생성
formData.append('name','hyemin'); // 폼 데이터를 스크립트로 추가
formData.append('item','hi'); // <input name="item" value="hi"> 와 같다.
formData.append('item','hello'); // <input name="item" value="hello">
// 만일 HTML에 미리 form 태그가 있으면 제이쿼리나 자바스크립트로 가져올 수도 있다.
let formData1 = new FormData($("#form Id")); // 제이쿼리인 경우
let formData2 = new FormData(document.getElementById("form Id")); // 자바스크립트로 가져 올 경
formData.append(name, value)
// - form의 name 과 value 를 필드의 추가
// - input의 name 속성과 value 입력값 역할을 한다고 생각 하면 된다.
// 자바스크립트로 직접 form 태그를 생성
formData.append(name, blob, fileName)
// - input 의 type 이 'file' 인 경우에 사용
// - fileName은 file의 이름의 해당
formData.delete(name)
// - 주어진 name 으로 필드를 제거
formData.get(name)
// - 주어진 name 의 해당 하는 필드 value를 반환
formData.getAll(name)
// - append 함수로 추가시 name이 중복 가능
// - 따라서 주어진 name 의 해당 하는 필드의 모든 value를 반환
formData.has(name)
// - 주어진 name 의 해당하는 필드가 있을 경우 true, 없으면 false를 반환
formData.set(name, value)
formData.set(name, blob, fileName)
// - set 함수는 append 함수 처럼 필드를 추가
// - append와 비슷한 set 메소드는 set도 추가를 해주기는 하지만, 기존 key가 있으면 그 key값을 모두 덮어씌워버린다
