SeouliteLab

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

프로그래밍

jQuery의 .serializeArray() 메소드: 폼 데이터 배열로 직렬화하기

Seoulite Lab 2024. 4. 5. 09:47

jQuery의 .serializeArray() 메소드는 폼 요소의 데이터를 JavaScript 객체의 배열로 직렬화하여 반환합니다. 이를 통해 폼 데이터를 보다 구조화된 형태로 수집하고 처리할 수 있습니다. 다양한 예제를 통해 이 메소드를 자세히 살펴보겠습니다.

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

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery .serializeArray() 예제</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 formDataArray = $(this).serializeArray();
    console.log(formDataArray);
    alert("폼 데이터 배열: " + JSON.stringify(formDataArray));
  });
});
</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>

출력 결과: 폼을 제출하면 콘솔에 폼 데이터 배열이 출력되며, 알림 창에는 JSON 형식으로 직렬화된 폼 데이터 배열이 표시됩니다.

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

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery .serializeArray() 예제</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 formDataArray = $(this).serializeArray();
    console.log(formDataArray);
    alert("폼 데이터 배열: " + JSON.stringify(formDataArray));
  });
});
</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>

출력 결과: 폼을 제출하면 콘솔에 폼 데이터 배열이 출력되며, 알림 창에는 JSON 형식으로 직렬화된 폼 데이터 배열이 표시됩니다. 체크된 관심사 항목도 포함됩니다.

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

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery .serializeArray() 예제</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 formDataArray = $(this).serializeArray();
    console.log(formDataArray);
    alert("폼 데이터 배열: " + JSON.stringify(formDataArray));
  });
});
</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>

출력 결과: 폼을 제출하면 콘솔에 폼 데이터 배열이 출력되며, 알림 창에는 JSON 형식으로 직렬화된 폼 데이터 배열이 표시됩니다.

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

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery .serializeArray() 예제</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 formDataArray = $(this).serializeArray();
    console.log(formDataArray);
    alert("폼 데이터 배열: " + JSON.stringify(formDataArray));
  });
});
</script>
</head>
<body>

<form id="serializeForm">
  <input type="hidden" name="userID

" value="123">
  <button type="submit">제출</button>
</form>

</body>
</html>

출력 결과: 폼을 제출하면 콘솔에 폼 데이터 배열이 출력되며, 알림 창에는 JSON 형식으로 직렬화된 폼 데이터 배열이 표시됩니다.

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

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>jQuery .serializeArray() 예제</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 formDataArray = $(this).serializeArray();
    console.log(formDataArray);
    alert("폼 데이터 배열: " + JSON.stringify(formDataArray));
  });
});
</script>
</head>
<body>

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

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

</body>
</html>

출력 결과: 어느 폼을 제출하든 콘솔에 폼 데이터 배열이 출력되며, 알림 창에는 JSON 형식으로 직렬화된 폼 데이터 배열이 표시됩니다.

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

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

jQuery의 .after() 메서드를 활용한 요소 삽입  (0) 2024.04.05
jQuery의 .pushStack() 메소드: 요소 스택 조작하기  (0) 2024.04.05
jQuery의 .serialize() 메소드: 폼 데이터 직렬화하기  (0) 2024.04.05
jQuery의 .unload() 메소드: 페이지가 언로드될 때 이벤트 처리하기  (0) 2024.04.05
jQuery의 .undelegate() 메소드 탐구하기: 이벤트 핸들러 유연하게 해제하기  (0) 2024.04.05
'프로그래밍' Related Articles more