[javascript] serialize()를 이용한 ajax Form 데이타 전송하기

[javascript] serialize()를 이용한 ajax Form 데이타 전송하기

 

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

serialize()를 이용하면 일일이 fname=값&femail=값&sex=값&job=값 이렇게 안해주어되 됩니다.

 

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

<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> </form> 라고 했을때 serialize()를 사용하지 않고 파라미터값을  전달시   fname=값&femail=값&sex=값&job=값 또는 var params = {     fname       : '값',     femail : '값',     sex    : '값',     job : '값' };

 

serialize() 사용하기

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

<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>

 

참고사이트 : https://api.jquery.com/serialize/

출처 : http://chongmoa.com/ajxa/6764