jQuery - serialize()란? 사용방법

-serialize() 입력된 모든Element(을)를 문자열의 데이터에 serialize 한다-

 

serialize()를 이용하면 파라미터  전달 시에

fname=값&femail=값&sex=값&job=값 이렇게 안해줘도 된다.

1. serialize()를 사용하지 않고 파라미터값을  전달시

 

<form name="formname1" id="formname1" style="margin:0px;"> <div>     <label for="name">이름</label>         :     <input type="text" name="fname" id="fname" value="C.m.A" /> </div>  <div>     <label for="email">이메일</label>     :     <input type="text" name="femail" id="femail" value="" /> </div> <div>     <label for="sex">성별</label>     :     <input type="radio" name="sex" value="0" />여자     <input type="radio" name="sex" value="1" />남자  </div> <div>     <label for="job">직업</label>     :     <select name="job" id="job">     <option value="직업1">직업1</option>     <option value="직업2">직업2</option>     <option value="직업3">직업3</option>     </select>  </div> </form>   라고 했을때 serialize()를 사용하지 않고 파라미터값을  전달시   fname=값&femail=값&sex=값&job=값 또는 var params = {     fname       : '값',     femail : '값',     sex    : '값',     job : '값' };

 

 

2. serialize() 사용하기

 

var params = jQuery("#폼명").serialize() 또는 var params = $("#폼명").serialize()

 

<script> function formSubmit() {     var params = jQuery("#formname1").serialize();     // serialize() : 입력된 모든Element(을)를 문자열의 데이터에 serialize 한다.     jQuery.ajax({         url: '샘플ajax.php',         type: 'POST',         data:params,         contentType: 'application/x-www-form-urlencoded; charset=UTF-8',         dataType: 'html',         success: function (result) {             if (result){                 // 데이타 성공일때 이벤트 작성             }         }     }); } </script>   <form name="formname1" id="formname1" style="margin:0px;"> <div>     <label for="fname">이름</label>         :     <input type="text" name="fname" id="fname" value="C.m.A" /> </div>  <div>     <label for="femail">이메일</label>     :     <input type="text" name="femail" id="femail" value="" /> </div> <div>     <label for="sex">성별</label>     :     <input type="radio" name="sex" value="0" />여자     <input type="radio" name="sex" value="1" checked="checked" />남자  </div> <div>     <label for="job">직업</label>     :     <select name="job" id="job">     <option value="직업1">직업1</option>     <option value="직업2">직업2</option>     <option value="직업3">직업3</option>     </select>  </div> <div>        <input type="button" value="Ajax 폼 전송" onclick="formSubmit()" />  </div> </form>