jQuery ajax - serializeArray() 方法 · W3School jQuery 參考手冊

# jQuery ajax - serializeArray() 方法 ## 實例輸出以數組形式序列化表單值的結果： ``` $("button").click(function(){ x=$("form").serializeArray(); $.each(x, function(i, field){ $("#results").append(field.name + ":" + field.value + " "); }); }); ``` ## 定義和用法 serializeArray() 方法通過序列化表單值來創建對象數組（名稱和值）。您可以選擇一個或多個表單元素（比如 input 及/或 textarea），或者 form 元素本身。 ### 語法 ``` $(_selector_).serializeArray() ``` ### 詳細說明 serializeArray() 方法序列化表單元素（類似 [.serialize() 方法](/jquery/ajax_serialize.asp)），返回 JSON 數據結構數據。注意：此方法返回的是 JSON 對象而非 JSON 字符串。需要使用插件或者第三方庫進行字符串化操作。返回的 JSON 對象是由一個對象數組組成的，其中每個對象包含一個或兩個名值對 —— name 參數和 value 參數（如果 value 不為空的話）。舉例來說： ``` [ {name: 'firstname', value: 'Hello'}, {name: 'lastname', value: 'World'}, {name: 'alias'}, // 值為空 ] ``` .serializeArray() 方法使用了 W3C 關于 [successful controls](http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2)（有效控件）的標準來檢測哪些元素應當包括在內。特別說明，元素不能被禁用（禁用的元素不會被包括在內），并且元素應當有含有 name 屬性。提交按鈕的值也不會被序列化。文件選擇元素的數據也不會被序列化。該方法可以對已選擇單獨表單元素的對象進行操作，比如 <input>, <textarea>, 和 <select>。不過，更方便的方法是，直接選擇 <form> 標簽自身來進行序列化操作。 ``` $("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 } ] ``` ### 示例取得表單內容并插入到網頁中： HTML 代碼： ``` <p id="results"><b>Results:</b> </p> <form> <select name="single"> <option>Single</option> <option>Single2</option> </select> <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"/> check1 <input type="checkbox" name="check" value="check2" checked="checked"/> check2 <input type="radio" name="radio" value="radio1" checked="checked"/> radio1 <input type="radio" name="radio" value="radio2"/> radio2 </form> ``` jQuery 代碼： ``` var fields = $("select, :radio").serializeArray(); jQuery.each( fields, function(i, field){ $("#results").append(field.value + " "); }); ```