💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
# 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 属性。提交按钮的值也不会被序列化。文件选择元素的数据也不会被序列化。 该方法可以对已选择单独表单元素的对象进行操作,比如 &lt;input&gt;, &lt;textarea&gt;, 和 &lt;select&gt;。不过,更方便的方法是,直接选择 &lt;form&gt; 标签自身来进行序列化操作。 ``` $("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 + " "); }); ```