JQuery serialize() 사용하는 이유

 

JQuery serialize

JQuery Ajax로 호출하기 전에 serialize를 해주면 form안에 값들을

한 번에 전송 가능한 data로 만들 수 있어 많은 data를 보낼 때 유용하다.

(Ajax가 아닌 다른 상황에서도 사용할 수 있음.)

 

형태:  $("form id 또는 name").serialize();

 

serialize를 사용하지 않는다면 하나씩 담아줘야 하기 때문에

보낼 data가 많을수록 노가다를 엄청 해야 된다.

 

 

예제 소스

예제 소스를 통해 살펴보면, id="food" 인 form이 있다고 가능하자.

이제 아래 form을 Ajax를 사용하여 서버로 보내기 위한 data 형태로 만들어본다.

 

<form id="food">
    <input type="hidden" id="ramyun"  value="good" />
    <input type="hidden" id="pizza"   value="nice" />
    <input type="hidden" id="kimchi"  value="good" />
    <input type="hidden" id="dogfood" value="nope" />
</form>

 

 

1. serialize 사용할 경우

<script>
 
$.ajax({
  type: "",
  url  : 서버url,
  type : "POST",
  data : $("#food").serialize(),
  dataType: "json"
  success : function(){
    alert("성공했네?!");
  }
});
 
</script>

 

 

2. serialize 사용 안 할 경우

<script>
 
$.ajax({
  type : "POST",
  url  : 서버url,
  data : {
    ramyun: 'good',
    pizza: 'nice',
    kimchi: 'good',
    dogfood: 'nope'
  },
  dataType: "json"
  success : function(){
    alert("성공했네?!");
  }
});
 
</script>

 

 

위 케이스는 데이터 수가 적기 때문에 큰 차이가 없을 수도 있으나

보통 업무를 하다보면 전송 데이터만 수십개는 되기 때문에 유용하게 사용될 수 있다 :)

 

굿굿!