[Jquery] Serialize와 SerializeArray의 개념 (Feat.Ajax)

Serialize 와 SerializeArray 개념

에 대해서 알아보자.

 

 

먼저 Serialize에 대한 개념을 살펴보자.

Serialize는 우리 나라 말 로 직렬화 이다.

직렬화는 컴퓨터 과학과 데이터 전송 분야에서 중요한 개념이다.

직렬화는 데이터 구조나 객체를 바이트 스트림 또는 다른 형태로 변환하는 프로세스를 말한다.

이 프로세스를 통해 데이터나 객체를 파일로 저장하거나 네트워크를 통해 전송하고, 나중에 복원할 수 있다.


데이터 저장

객체나 데이터 구조를 파일 또는 데이터베이스에 저장할 때 사용된다.

이후에 데이터를 읽어와 복원할 수 있습니다.

데이터 전송

객체를 네트워크를 통해 다른 시스템으로 전송할 때 사용된다.

객체를 직렬화하여 전송하면 원격 시스템에서 객체를 복원할 수 있다.

캐시

직렬화는 객체를 캐시에 저장하고 나중에 필요한 경우 복원할 수 있게 해준다.

 

다시 본론으로 돌아와서

 

JQuery Ajax로 호출하기 전에,

Serialize를 해주면 form안에 값들을 한번에 전송 가능한 data로 만들 수 있어서,

많은 data를 보낼 때 유용하다.

 

 

형태

$().serialize();

$() 괄호 안에는 form의 id나 name을 넣어주면 된다.

 

예시

<from id="form">
	<input type="text" name="a" value="1"/>
   	<input type="text" name="b" value="2"/>
    <input type="text" name="c" value="3"/>
</form>

<script>

//serialize를 사용할 경우
 $.ajax({
 	type : 'GET',
 	url : '서버url',
 	dataType : 'JSON',
 	data : $(#form).serialize();,
 	success : function() {
 		alert('전송 성공!');
     }
 });

//serialize를 사용 안 할 경우 
 $.ajax({
 	type : 'GET',
 	url : '서버url',
 	dataType : 'JSON',
 	data : {
    	 a : '1' ,
    	 b : '2' ,
    	 c : '3' 
 	},
 	success : function() {
 		alert('전송 성공!');
    }
 });

</script>

 

 

 

Ajax를 사용해서 서버에 데이터를 보낼 때, 서버가 이해할 수 있는 형식으로 바꿔줘야 한다.

그 형식으로 바꿔주는 방법이 객체 직렬화 (데이터 직렬화) 이다.

이 형식으로 바꿔주면 하나의 객체로 만들 수 있고, Ajax요청에서 데이터를 하나의 덩어리로 보낼 수 있다 !

 

Jquery에서 제공하는 직렬화 메소드가 있는데, 그 메소드가 Serialize 와 SerializeArray 이다.

 

---

 

Serialize 예시

폼(form)에 있는 모든 필드를 문자열 하나로 합치는데, 문자열을 키/값의 쌍을 &문자로 구분한 형태이다.

<from id="firstForm">
	<input type="text" name="a" value="1"/>
    <input type="text" name="b" value="2"/>
    <input type="text" name="c" value="3"/>
</form>

$("#firstForm").serialize();

//결과 a=1&b=2&c=3

---

 

SerializeArray 예시

키/값 쌍으로 구성된 연고나 배열을 만드는데, 이 배열은 단 하나의 객체지만 구조화가 잘 되어있다.

<from id="secondForm">
	<input type="text" name="d" value="4"/>
    <input type="text" name="e" value="5"/>
    <input type="text" name="f" value="6"/>
</form>

$("#secondForm").serialize();

//결과 [{name:"d" , value:"4"},{name:"e" , value:"5"},{name:"f" , value:"6"}]

 

 

 

참고(출처)

https://m.blog.naver.com/wiseyoun07/220659439860

serialize와 serializeArray 개념 정리

https://lookingfor.tistory.com/entry/JQuery-serialize

JQuery serialize() 사용하는 이유