[jQuery] Ajax Form 데이터 전송하기

ajax를 이용하여 데이터를 주고 받다 보면 Form 태그 하위에 있는 값들을 한꺼번에 전송해야 할 때가 있다.
Form 태그내의 항목이 많지 않다면 일일이 각 항목의 value 값을 읽어와 넘길수 있겠지만, Form 태그내의 모든 항목을 전송한다고 하면 굳이 그럴 필요는 없다.

jQuery에서는 serialize() 라는 메소드를 제공하는데, 해당 메소드를 사용하면 Form 태그내의 항목들을 자동으로 읽어와

queryString 형식으로 변환시켜 준다.

즉. id=xxx&name=홍길동&age=26 이런식으로 변환하여 주는데, 이 값을 ajax 호출시 data 속성에 넣어 ajax 통신을 하면 된다.

<script>

	function to_ajax(){
 

		var queryString = $("form[name=testForm]").serialize() ;

		$.ajax({
			type : 'post',
			url : '/test.jsp',
			data : queryString,
			dataType : 'json',
			error: function(xhr, status, error){
				alert(error);
			},
			success : function(json){
				alert(json)
			}
		});
 
	}


</script>

<form name="testForm" id="testForm">
	<input type="text" name="name" id="name" value="홍길동" />
	<input type="text" name="id" id="id" value="1234567" />
</form>