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

serialize() 와 serializeArray() 개념 정리

 

이번 글에서는 jQuery에서 자주 사용되는

serialize() 와 serializeArray() 메서드에 대해 정리해보았습니다.

 

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

---

 

✅  jQuery(제이쿼리)란?

제이쿼리는 자바스크립트를 좀 더 간단하고 간결하게 쓸 수 있도록 도와주는 라이브러리입니다.
HTML 요소를 더 쉽게 선택하고 조작할 수 있도록 다양한 기능을 제공합니다.

 

예를 들어,
자바스크립트로는 몇 줄이 필요한 코드를 jQuery 한 줄로 구현할 수 있어서,
개발 속도와 코드 가독성 모두 개선할 수 있습니다.

특히, JSP 개발을 할 때 jQuery를 자주 사용하게 됩니다.

 

 

✅ serialize / serializeArray 한줄 요약

 

Serialize 란?

 <form> 태그 내부의 입력 값을

name=value 형태의 쿼리 스트링으로 만들어줍니다.

SerializeArray 란?
<form> 태그 내부의 입력 값을 

JSON 배열 형태의 객체로 반환해줍니다.

 

 

✅ 좀 더 자세히: 직렬화(serialize)란?

 

위에 두 메서드 모두에 이름에 serialize가 들어있는데요,

serialize는 한국어로 '직렬화' 라는 뜻을 가지고 있습니다.

 

 

📦 직렬화란? 

데이터를 전송하거나 저장할 수 있도록 특정 구조(예: 객체)를 연속된 데이터 형태로 변환하는 것

 

 

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

1. 데이터 저장

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

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

2. 데이터 전송

객체를 네트워크를 통해 다른 시스템에 데이터를 보낼 때, 직렬화를 통해 전송하고
상대 시스템에서는 다시 역직렬화(deserialize) 를 통해 데이터를 복원합니다.

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