제이쿼리 폼의 객체 값을 문자열로 변환 jquery serialize() method

 

제이쿼리 폼의 객체 값을 문자열로 변환 jquery serialize() method

 

폼의 객체들과 값을 String으로 바꾸어 주는데는 serialize() 메소드를 사용한다.
폼의 입력값을 ajax를 사용해 비동기로 전달하는데 유용하게 사용됩니다.

 

- serialize() 사용방법
폼내의 객체의 name과 value를 &로 구분하여 string으로 변환한다.

 

 

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("div").text($("form").serialize());
    });
});
</script>

<form id="searchForm" action="">
    <input type="text" name="language" value="Jquery"><br>
    <input type="text" name="method" value="serialize()"><br>
</form>
 
<button>Serialize</button><br><br>
<div></div>

두개의 택스트 상자의 값을 String 으로 만들어 div에 뿌려주는 코드이다.

위의 결과는 language=Jquery&method=serialize() 이다.

객 개체는 &로 구분되며 name=value의 형태이다.
텍스트 뿐만아니라 라디오버튼, 체크박스, 콤보박스의 값도 변환 할 수 있다.

 

- 참고1
아래와 같이 jsp에서 ajax를 사용해 값을 전달 하는데 유용하게 사용된다.

 

 

[JSP]

var dataParam = $("#searchForm").serialize();
$.ajax({
      type : 'POST',  
      dataType : 'json', 
      data:dataParam,
      url : 'serializeTest.do',  
      success : function(returnData) {
           if(returnData.resultCode==200){
                alert("데이터를 가져오는데 성공하였습니다.");
           },error:function(e){
                alert("데이터를 가져오는데 실패하였습니다.");
           } 
 });

- 참고2

 

ajax() 대신 ajaxSubmit() 을 사용하면 serialize() 하지 않아도 된다.