jquery로 form데이터 보내기

html에서 form태그로 get 또는 post방식으로 데이터를 전송할 수 있다.

하지만 form태그로 받은 데이터를 그대로 서버로 보내는 것이 아니라 무언가 처리를 해서 보내야할 때가 있다.

그 때 jquery를 사용해서 ajax 방식으로 form태그의 데이터를 보낼 수 있다.

 

html코드

<form name='form'>

  <input type='text' name='name1' value='value1'>
  <input type='text' name='name2' value='value2'>
  <input type='text' name='name3' value='value3'>

</form>

 

$는 jquery를 의미한다.

$.ajax({
 url: ajax_url  // post데이터를 보낼 서버 주소
 ,type: "POST"  // GET 또는 POST 방식으로 정할 수 있음
 ,data : $("form").serialize()  // form태그에 있는 데이터 직렬화
 ,success: function(json){      // 서버에서 정상적으로 응답받았을 때 호출할 콜백함수
 }
});

 

데이터를 가져오는 부분을 보자.

$("form").serialize()  // form태그에 있는 데이터 직렬화

form태그에 작성된, 또는 미리 넣어둔 value들을 name=value형태로 모두 가져오게 된다.

name1=value1&name2=value2&name3=value3

이렇게 가져오게 된다.

 

하나의 요소에 접근해서 데이터를 가져와도 되지만, 이렇게 form태그에 여러 데이터를 한 번에 가져올 수 있다는 것을 기억하고 있자.

 

 

참고) 개발에서 serialize라는 단어가 뜻하는 것은?

여러 자료들을 뒤지다보니 serialize라는 단어가 자주 등장하는 것 같아서 무슨뜻인지 찾아보았다.

어느 분이 질문하고 대답을 받은 내용을 그대로 옮겨본다.

 

답변:

serialize는 직렬화, deserialize는 역직렬화인데요.

직렬화라는 것은 어떤 데이터를 다른 곳에서 사용할 수 있게 다른 포맷의 데이터로 바꾸는 것을 의미합니다.

 

데이터의 포맷을 바꾸는 것이라고 일단은 기억하고 있자.