jQuery Ajax와 Form 요소 데이터 전송 정리

jQuery의 .serialize()와 .serializeArray() 메소드를 활용하면 Ajax로 폼 데이터를 간편하게 전송할 수 있습니다. 비동기 폼 제출의 핵심을 정리합니다.

---

1. Ajax에서 Form 데이터를 전송하는 이유

기존 HTML 폼은 제출 시 전체 페이지가 새로고침됩니다. 하지만 jQuery Ajax를 사용하면 페이지 이동 없이 서버와 데이터를 주고받고, 결과만 일부 화면에 출력할 수 있습니다. 사용자 경험을 크게 향상시킬 수 있죠.

---

2. 직렬화란?

• 직렬화(Serialization)는 HTML <form> 요소에 입력된 데이터를 하나의 문자열로 변환하는 과정입니다.

name=홍길동&email=test@example.com&message=안녕하세요

이 문자열은 서버에 전송 가능한 포맷이며, 쿼리 문자열(Query String) 형식입니다.

---

3. jQuery 직렬화 메소드

.serialize()

• <form> 안의 모든 입력 값을 쿼리 문자열로 반환합니다.
• 바로 Ajax의 data로 전달 가능.

const data = $("form").serialize();

.serializeArray()

• 이름(name)과 값(value)을 객체 배열 형태로 반환합니다.
• 유효성 검사, 가공 작업이 필요한 경우 유용.

const array = $("form").serializeArray();

예시 출력:

[
  { name: "name", value: "홍길동" },
  { name: "email", value: "test@example.com" }
]

---

4. 사용 예제

.serialize() 사용 예

$("form").on("submit", function (e) {
  e.preventDefault();
  const formData = $(this).serialize();
  console.log(formData); // key1=value1&key2=value2
});

.serializeArray() 사용 예

$("form").on("submit", function (e) {
  e.preventDefault();
  const formArray = $(this).serializeArray();
  console.log(formArray);
});

---

5. Ajax로 Form 데이터 전송하기

$("form").on("submit", function (e) {
  e.preventDefault();
  const formData = $(this).serialize();

  $.ajax({
    url: "/submit",       // 서버 요청 주소
    method: "POST",       // POST 방식 전송
    data: formData,
    success: function (res) {
      alert("서버 응답: " + res.message);
    },
    error: function (xhr, status, err) {
      console.error("요청 실패:", err);
    }
  });
});

---

6. 한글 데이터 전송 시 주의사항

한글은 전송 중 퍼센트 인코딩이 적용됩니다.

예:

message=안녕하세요` → `message=%EC%95%88%EB%85%95%ED%95%98%EC%84%B8%EC%9A%94

서버에서 decodeURIComponent() 또는 해당 언어의 디코딩 함수를 사용해 처리해야 합니다.

---

질문 정리

.serialize()와 .serializeArray()는 언제 각각 사용하나요?

→ 서버 전송용이면 .serialize(), JS에서 값 가공이 필요하면 .serializeArray()가 유리합니다.

모든 input 값이 자동으로 직렬화되나요?

→ <input>, <select>, <textarea> 등의 name 속성이 설정된 요소만 직렬화됩니다.

폼 유효성 검사와 Ajax 전송은 함께 사용할 수 있나요?

→ 가능합니다. submit 이벤트 내에서 JavaScript로 유효성 검사를 하고, 통과 시 Ajax 요청을 실행하세요.

파일 업로드도 .serialize()로 전송되나요?

→ 아닙니다. 파일 전송은 FormData 객체를 사용해야 합니다.

---

마무리 정리

• .serialize() → URL 인코딩된 쿼리 문자열 반환
• .serializeArray() → 배열로 변환하여 커스터마이징에 적합
• Ajax와 함께 쓰면 페이지 새로고침 없이 빠르게 데이터를 전송 가능
• 한글 인코딩과 유효성 검사를 고려하면 안정적인 폼 처리 가능