SeouliteLab

jQuery의 .serialize() 메소드: 폼 데이터 직렬화하기 본문

프로그래밍

jQuery의 .serialize() 메소드: 폼 데이터 직렬화하기

Seoulite Lab 2024. 4. 5. 09:46

jQuery의 .serialize() 메소드는 폼 요소의 데이터를 직렬화하여 URL 쿼리 문자열 형식으로 반환합니다. 이를 통해 폼 데이터를 간편하게 수집하고 AJAX 요청을 보낼 때 사용할 수 있습니다. 다양한 예제를 통해 이 메소드를 자세히 살펴보겠습니다.

예제 1: 단일 폼 요소 직렬화

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery .serialize() 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $("#serializeForm").submit(function(event) {
    event.preventDefault();
    var formData = $(this).serialize();
    alert("직렬화된 데이터: " + formData);
  });
});
</script>
</head>
<body>

<form id="serializeForm">
  <input type="text" name="username" value="John">
  <input type="email" name="email" value="john@example.com">
  <button type="submit">제출</button>
</form>

</body>
</html>

출력 결과: 폼을 제출하면 알림 창이 뜨며, 직렬화된 데이터가 표시됩니다.

예제 2: 여러 폼 요소 직렬화

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery .serialize() 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $("#serializeForm").submit(function(event) {
    event.preventDefault();
    var formData = $(this).serialize();
    alert("직렬화된 데이터: " + formData);
  });
});
</script>
</head>
<body>

<form id="serializeForm">
  <input type="text" name="username" value="John">
  <input type="email" name="email" value="john@example.com">
  <input type="checkbox" name="interest" value="programming" checked> 프로그래밍
  <input type="checkbox" name="interest" value="design"> 디자인
  <button type="submit">제출</button>
</form>

</body>
</html>

출력 결과: 폼을 제출하면 알림 창이 뜨며, 직렬화된 데이터가 표시됩니다. 체크된 관심사 항목도 포함됩니다.

예제 3: 선택된 옵션 직렬화

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery .serialize() 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $("#serializeForm").submit(function(event) {
    event.preventDefault();
    var formData = $(this).serialize();
    alert("직렬화된 데이터: " + formData);
  });
});
</script>
</head>
<body>

<form id="serializeForm">
  <select name="language">
    <option value="javascript">JavaScript</option>
    <option value="python" selected>Python</option>
    <option value="java">Java</option>
  </select>
  <button type="submit">제출</button>
</form>

</body>
</html>

출력 결과: 폼을 제출하면 알림 창이 뜨며, 선택된 언어가 직렬화된 데이터로 표시됩니다.

예제 4: 숨겨진 필드 직렬화

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery .serialize() 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $("#serializeForm").submit(function(event) {
    event.preventDefault();
    var formData = $(this).serialize();
    alert("직렬화된 데이터: " + formData);
  });
});
</script>
</head>
<body>

<form id="serializeForm">
  <input type="hidden" name="userID" value="123">
  <button type="submit">제출</button>
</form>

</body>
</html>

출력 결과: 폼을 제출하면 알림 창이 뜨며, 숨겨진 필드의 데이터가 직렬화된 데이터로 표시됩니다.

예제 5: 여러 폼 요소가 있는 여러 폼 직렬화

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery .serialize() 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $("#serializeForm1, #serializeForm2").submit(function(event) {
    event.preventDefault();
    var formData = $(this).serialize();
    alert("직렬화된 데이터: " + formData);
  });
});
</script>
</head>
<body>

<form id="serializeForm1">
  <input type="text" name="username" value="John">
  <input type="email" name="email" value="john@example.com">
  <button type="submit">제출</button>
</form>

<form id="serializeForm2">
  <input type="text" name="username" value="Jane">
  <input type="email" name="email" value="jane@example.com">
  <button type="submit">제출</button>
</form>

</body>
</html>

출력 결과: 어느 폼을 제출하든 알림 창이 뜨며, 해당 폼의 데이터가 직렬화된 데이터로 표시됩니다.

저작자표시 비영리 변경금지

'프로그래밍' 카테고리의 다른 글

jQuery의 .pushStack() 메소드: 요소 스택 조작하기  (0) 2024.04.05
jQuery의 .serializeArray() 메소드: 폼 데이터 배열로 직렬화하기  (0) 2024.04.05
jQuery의 .unload() 메소드: 페이지가 언로드될 때 이벤트 처리하기  (0) 2024.04.05
jQuery의 .undelegate() 메소드 탐구하기: 이벤트 핸들러 유연하게 해제하기  (0) 2024.04.05
jQuery의 .unbind() 메소드 탐구하기: 이벤트 핸들러 동적으로 관리하기  (0) 2024.04.05
'프로그래밍' Related Articles more