jQuery serializeArray() 메서드로 폼 데이터를 배열(JSON)로 직렬화하는 방법

serializeArray() 메서드란?

jQuery의 serializeArray() 메서드는 .serialize() 메서드와 마찬가지로 폼(form)과 폼 요소들을 직렬화하지만, URL 인코딩된 문자열 대신 JSON 데이터 구조(객체 배열)를 반환한다는 점이 다릅니다. 반환되는 배열의 각 항목은 { name: "필드명", value: "값" } 형태의 객체이므로, 자바스크립트에서 각 필드 값을 손쉽게 순회하거나 가공할 수 있습니다.

서버 측 예제 (PHP)

먼저 POST 요청을 처리할 PHP 파일 serialize.php의 내용은 다음과 같습니다.

<?php
    if( $_REQUEST["name"] ) {
        $name = $_REQUEST['name'];
        echo "Welcome ". $name;
        $age = $_REQUEST['age'];
        echo "<br />Your age : ". $age;
        $sex = $_REQUEST['sex'];
        echo "<br />Your gender : ". $sex;
    }
?>

이 PHP 파일은 클라이언트에서 전송된 name, age, sex 값을 받아 인사말과 함께 화면에 출력합니다.

클라이언트 측 전체 예제

다음은 serializeArray() 메서드를 실제로 사용하는 완전한 HTML 코드입니다. 버튼을 클릭하면 폼 데이터가 직렬화되어 서버로 전송되고, 그 결과와 함께 직렬화된 값들이 화면에 표시됩니다.

<html>
    <head>
        <title>The jQuery Example</title>
        <script type = "text/javascript"
            src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
        </script>
        <script type = "text/javascript" language = "javascript">
            $(document).ready(function() {
                $("#driver").click(function(event){
                    $.post(
                        "/jquery/serialize.php",
                        $("#testform").serializeArray(),
                        function(data) {
                            $('#stage1').html(data);
                        }
                    );
                    var fields = $("#testform").serializeArray();
                    $("#stage2").empty();
                    jQuery.each(fields, function(i, field){
                        $("#stage2").append(field.value + " ");
                    });
                });
            });
        </script>
    </head>
    <body>
        <p>Click on the button to load result.html file:</p>
        <div id = "stage1" style = "background-color:blue;">
            STAGE - 1
        </div>
        <br />
        <div id = "stage2" style = "background-color:blue;">
            STAGE - 2
        </div>
        <form id = "testform">
            <table>
                <tr>
                    <td><p>Name:</p></td>
                    <td><input type = "text" name = "name" size = "40" /></td>
                </tr>
                <tr>
                    <td><p>Age:</p></td>
                    <td><input type = "text" name = "age" size = "40" /></td>
                </tr>
                <tr>
                    <td><p>Sex:</p></td>
                    <td> <select name = "sex">
                        <option value = "Male" selected>Male</option>
                        <option value = "Female" selected>Female</option>
                    </select></td>
                </tr>
                <tr>
                    <td colspan = "2">
                        <input type = "button" id = "driver" value = "Load Data" />
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

코드 동작 방식 설명

1단계 — 서버로 데이터 전송: 버튼(#driver)을 클릭하면 $.post()가 실행되어 /jquery/serialize.php로 POST 요청을 보냅니다. 이때 두 번째 인자로 $("#testform").serializeArray()를 전달하므로, 폼의 모든 입력값(name, age, sex)이 JSON 객체 배열 형태로 서버에 전송됩니다. 서버의 응답 결과는 파란색 배경의 #stage1 영역에 출력됩니다.

2단계 — 직렬화된 값 화면에 표시: 동일하게 serializeArray()로 얻은 배열을 jQuery.each()로 순회하면서 각 필드의 value를 추출해 #stage2 영역에 이어 붙여 출력합니다.

serialize() vs serializeArray() 비교

.serialize(): 폼 데이터를 name=value&name=value 형태의 URL 인코딩 문자열로 반환합니다.
.serializeArray(): 폼 데이터를 [{name: "...", value: "..."}, ...] 형태의 JSON 객체 배열로 반환하여, 자바스크립트에서 개별 필드 접근과 조작이 용이합니다.

AJAX 요청 시 서버에 전송할 데이터를 만들거나, 폼 값을 자바스크립트에서 다루고 싶을 때는 serializeArray()가 더 유용한 선택입니다.