잘못된 내용이 있을 경우 피드백 주시면 감사합니다 :)
serialize란?
데이터를 보내기 위해 폼 요소 집합을 문자열로 인코딩
.serialize() 함수는 표준 URL-encoded 표기법으로 텍스트 문자열을 만듭니다.
이 함수는 폼 요소 집합을 표현하는 jQuery 객체를 이용합니다.
serialize에 들어가기 앞서, 필자는 보통 AJAX를 사용할 때 보내는 데이터 값이 적다면 아래 예제와 같이 data라는 변수에 JSON 형태로 보내는데
// [이벤트] find_pw button checked Event
$(".save_btn").on("click", function() {
if (find_checked_type == "") {
alert("비밀번호를 찾을 선택 방법을 선택 해주세요");
} else {
let check_data = {
phone_id : is_empty($('[name=phone_id]').val()),
phone : is_empty($('[name=phone]').val())
};
if (find_checked_type == "phone" && check_data.phone_id) {
alert('아이디를 입력 해주세요');
$('[name=phone_id]').focus();
} else if ($("#certification_certi").val() != "Y") {
alert("휴대폰 번호 인증을 받으십시오");
$("[name=phone]").focus();
} else if (confirm("입력하신 정보로 비밀번호를 찾으시겠습니까?")) {
let data = {
flag : "member_find_type",
flag_type : is_type,
find_checked_type : find_checked_type,
phone_id : filter_xss($('[name=phone_id]').val()),
phone : filter_xss($('[name=phone]').val())
};
$.ajax({
url: "<?= AJAX_URL ?>/member.php",
type: 'POST',
data: data,
dataType : 'JSON',
success: function(data) {
if (data.code == 1) {
alert(data.description);
window.location.replace("/login.php");
} else {
alert(data.description);
window.location.reload();
}
},
fail:function(e){
alert("이 사이트는 곧 제공 될 예정입니다.");
},
error:function(request,status,error){
alert("2. code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
console.log("2. code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
}
});
}
}
});만약 예로 들어 회원가입같은 입력받는 데이터가 많는 페이지 같은 경우에는 어떡해야할까?
..... = {
flag : "member_find_type",
flag_type : is_type,
find_checked_type : find_checked_type,
phone_id : filter_xss($('[name=phone_id]').val()),
phone : filter_xss($('[name=phone]').val()),
email : filter_xss($('[name=email]').val()),
email_id : filter_xss($('[name=email_id]').val())
};
위 예제처럼 받는 데이터 값이 많아진다면
데이터 넣는 코드만 해도 매우 늘어진다.
이런 점을 serialize()를 사용하면 속시원해진다.
serialize는 폼 요소 개별 객체별로 사용할 수 있는데,
input, textarea, select와 같은 개별 요소들이 이 객체를 사용할 수 있습니다.
하지만, 대체적으로 아래 예제와 같이 form 태그를 선택해서 직렬화하는 방식이 많습니다.
let mypage_form = $("form[name=mypage_form]").serialize();
console.log(mypage_form);
=> name=홍길동&phone=01088709954&id=OOOO&password=OOOO
로그를 확인 해보면 해당 form태그 안에 있는 input, textarea, select의 name값 들을 문자열 하나의 key ~ value 형식으로 쿼리 스트링을 만들어 냅니다.
여기서 주의할 점은 serialize는 type=file 요소는 포함하지 않습니다.
그 점을 해결하고자 javascript에서 파일 업로드를 할려면 FormData 객체를
사용 해야 하는데 이 FormData를 사용하여 append 시키는 부분을
serialize를 통해 append 하는 부분의 코드를 확 줄일 수 있는데
아래 예제를 통해 확인 해보자
// [함수] 회원 정보 수정 여부 판단
function checkModify() {
let regValidation = true;
let is_mypage = true;
let user_type = (($('input[name=user_type]:checked').val() != "basic_member") ? 1 : 0);
let mypage_form = $("form[name=mypage_form]").serializeArray();
let formData = new FormData();
// 데이터 유효성 체크
if (!modifyDataAbility(mypage_form)) {
regValidation = false;
}
// 모든 유효성, 중복 체크가 확인 됐을 때
mypage_form.forEach(function(data) {
formData.append(data["name"], data["value"]);
});
// 단일 파일 업로드
if ($('input[name=file]')[0].files[0] != undefined) {
formData.append('file', $('input[name=file]')[0].files[0]);
}
// Ajax flag
formData.append("flag", "member_modify");
if (regValidation) {
if (confirm("수정하시겠습니까?")) {
$.ajax({
...............
});
}
}
}위 예제 코드에서 serializeArray()를 사용한 mypage_form 변수에 forEach를 돌려
form 태그 안에 있는 요소들이 key ~ value로 들어간다.
formData.append("key", "value")로 하나 하나 append하는
소스 코드를 확 줄여준다.
여기서 유효성 확인이나 빈 값 체크 부분은 어떻게 해야 하는지 궁금증이 들것입니다.
해당 부분은 위 예제의 modifyDataAbility 함수 코드를 확인하면 됩니다.
가끔 작업할 때 input 요소가 많거나 데이터를 한 번에 처리해야 하는 일이 생기면 사용하는 편인데 많이 유용하다.
