jQuery序列化form表單，serialize、serializeArray以及serializeObject的用法

工作上遇在送出表單前要先與資料庫內容比對，我的作法是透過Ajax將表單序列化資料送至後台進行檢查。

表單序列化的可以有三種方式，serialize、serializeArray以及封裝一個方法serializeObject，這邊拿官網範例並設定checkbox陣列，看看有什麼差異。

<form id="form1">
    <select name="single">
        <option>Single</option>
        <option>Single2</option>
    </select>

    <br>
    <select name="multiple" multiple="multiple">
        <option selected="selected">Multiple</option>
        <option>Multiple2</option>
        <option selected="selected">Multiple3</option>
    </select>

    <br>
    <input type="checkbox" name="check[]" value="check1" id="ch1">
    <label for="ch1">check1</label>
    <input type="checkbox" name="check[]" value="check2" checked="checked" id="ch2">
    <label for="ch2">check2</label>
    <input type="checkbox" name="check[]" value="check3" checked="checked" id="ch3">
    <label for="ch3">check3</label>

    <br>
    <input type="radio" name="radio" value="radio1" checked="checked" id="r1">
    <label for="r1">radio1</label>
    <input type="radio" name="radio" value="radio2" id="r2">
    <label for="r2">radio2</label>
</form>

serialize()

序列化表單元素，建立標準的URL編碼文字字串．因為會轉成URL編碼文字字串，會發現[]變成了%5b%5d。

single=Single&multiple=Multiple&multiple=Multiple3&check%5B%5D=check2&check%5B%5D=check3&radio=radio1

serializeArray() 

序列化表單元素，回傳JSON物件陣列

[
    {
        "name": "single",
        "value": "Single"
    },
    {
        "name": "multiple",
        "value": "Multiple"
    },
    {
        "name": "multiple",
        "value": "Multiple3"
    },
    {
        "name": "check[]",
        "value": "check2"
    },
    {
        "name": "check[]",
        "value": "check3"
    },
    {
        "name": "radio",
        "value": "radio1"
    }
]

有顯示完成name，但如果拿來分析還是不方便。

自己封裝一個方法 serializeObject()

序列化表單元素，回傳物件。可能會遇到用[]命名(使用陣列)的元素，因此增加檢查接收值是否為[]陣列判斷，處理後再加入form data。

/**
 * serializeArray() 方法通過序列化表單值來建立物件陣列(名稱和值)
 * 自訂jquery一個方法 serializeObject() 來返回物件
 */
jQuery.fn.serializeObject = function () {
    var formData = {};
    var formArray = this.serializeArray();

    $.each(formArray, function (i, Data) {
        var columnName = Data.name;
        // 檢查接收值是否為[]陣列，再加進form data
        if (columnName.substring(columnName.length, columnName.length - 2) == '[]') {
            columnName = columnName.substring(0, columnName.length - 2);

            if (!formData[columnName])
                formData[columnName] = [];

            $.merge(formData[columnName], [Data.value]);
        } else {
            formData[Data.name] = Data.value;
        }
    });

    return formData;
};

轉換後格式

{
    "single": "Single",
    "multiple": "Multiple3",
    "check": [
        "check2",
        "check3"
    ],
    "radio": "radio1"
}

參考網址:jQuery-serialize()