jquery serializeArray() 方法通過序列化表單值來創建對象數組（名稱和值）。

 

serializeArray() 方法序列化表單元素（類似 .serialize() 方法），返回 JSON 數據結構數據。

html代碼：

<form>
  <div><input type="text" name="a" value="1" id="a" /></div>
  <div><input type="text" name="b" value="2" id="b" /></div>
  <div><input type="hidden" name="c" value="3" id="c" /></div>
  <div>
    <textarea name="d" rows="8" cols="40">4</textarea>
  </div>
  <div><select name="e">
    <option value="5" selected="selected">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select></div>
  <div>
    <input type="checkbox" name="f" value="8" id="f" />
  </div>
  <div>
    <input type="submit" name="g" value="Submit" id="g" />
  </div>
</form>

jquery代碼：

$('form').submit(function() {
  console.log($(this).serializeArray());
  return false;
});

將產生以下數據結構(瀏覽器提供的console.log)：

[
  {
    name: "a",
    value: "1"
  },
  {
    name: "b",
    value: "2"
  },
  {
    name: "c",
    value: "3"
  },
  {
    name: "d",
    value: "4"
  },
  {
    name: "e",
    value: "5"
  }
]

 

實際應用例子，通過ajax把表單數據上傳給服務器：

            var formdataArr = $(form).serializeArray();
            var formdata = {};
            for (var i = 0; i < formdataArr.length; i++) {
                if(formdataArr[i]['name'] == "editorValue"){
                    continue;
                }

                formdata[formdataArr[i]['name']] = formdataArr[i]['value'];
            };
            $.ajax({
                url: '/cases/submit',
                type: 'post',
                dataType: 'json',
                data: formdata,
                success: function(data){

                    if(data.r == "0"){
                        bootbox.alert({
                            message: data.msg || "恭喜，提交保存成功",
                            callback: function() {
                                document.location.href = "/cases/showCaseList";
                            }
                        });
                        return false;
                    }else{
                        bootbox.alert(data.msg || "抱歉，提交保存失敗");
                        return false;
                    }
                },
                error: function(){
                    bootbox.alert("抱歉，網絡繁忙，請稍后再試");
                }
            });