ajax로 form의 모든 값 넘기기

ajax를 이용하여 데이터를 주고 받다 보면 Form 태그 하위에 있는 값들을 한꺼번에 전송해야 할 때가 있음
Form 태그내의 항목의 value 값을 읽어와 하나하나 넘길 수도 있지만, Form 태그내의 모든 항목을 전송한다면 .serialize()를 활용하면 됨

 

var formValues = $("form[name=formName]").serialize() ;

 

사용 예시 👇

<script>
    function ajax(){
  
 
        var formValues = $("form[name=sampleForm]").serialize() ;
 
        $.ajax({
            type : 'post',
            url : '/test.jsp',
            data : formValues,
            dataType : 'json',
            error: function(xhr, status, error){
                alert(error);
            },
            success : function(json){
                alert(json)
            }
        });
  
    }
 
 
</script>
 
<form name="sampleForm" id="sampleForm">
    <input type="text" name="name" id="name" value="권정열" />
    <input type="text" name="email" id="email" value="passion@10cm.com" />
    <input type="text" name="phone" id="phone" value="01012345678" />
</form>