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

 

Serialize 와 SerializeArray 

 

 

Serialize 와 SerializeArray 에 대해 알아보자 

우선,  둘다 JQuery에서 제공하는 직렬화 메소드 이다.

 

Jquery(제이쿼리)란? 자바스크립트 라이브러리이다.

html 요소를 간단하고 편리하게 사용할 수 있는 기능이 내재되어있다.

자바스크립트는 동적인 기능을 구현할 수 있지만,

코드가 너무 길어지고 복잡해지는 단점을 가지고 있다.

제이쿼리를 사용하면 같은 기능도 더 간략하고, 단순한 코드로 구현할 수 있다!

즉, 제이쿼리에는 자바스크립트의 코드를 단순하게 변경하고 

Html 요소를 간단하게 구현할 수 있다는 라이브러리라고 생각하면 된다.

주로 JSP 개발할 때 자주 사용한다 :)

 

 

제이쿼리에 대해서도 간단하게 알아보았으니

Serialize와 SerializeArray가 무슨 역할을 하는지 

한줄평으로 정리를 해보면 

아래와 같다.

 

 

Serialize 란?

 <form> 태그 내부의 값을 name=value으로 변경해 쿼리 스트링으로 만들어준다.

SerializeArray 란?
<form> 태그 내부의 값을 JSON 형태의 문자열을 배열로 리턴한다.

 

 

그럼 이제 좀 더 자세하게 알아보자.

먼저 직렬화에 대해서 알아보자! 

 

---

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

 

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

 

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

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


1. 데이터 저장

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

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

2. 데이터 전송

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

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

3. 캐시

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

---

 

다시 본론으로 돌아와서,

 

 

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>

 

 

Serialize를 사용한 예시와 사용안한 예시를 살펴보면,

메소드사용으로 편하게 데이터를 전송할 수 있는것을 확인 할 수 있다.

<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와 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"}]