jQuery 的 serializeArray()、serialize() 方法

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() 方法），返回 JSON 数据结构数据。

注意：此方法返回的是 JSON 对象而非 JSON 字符串。需要使用插件或者第三方库进行字符串化操作。

返回的 JSON 对象是由一个对象数组组成的，其中每个对象包含一个或两个名值对 —— name 参数和 value 参数（如果 value 不为空的话）。举例来说：

[ {name: 'firstname', value: 'Hello'}, {name: 'lastname', value: 'World'},{name: 'alias'}, // 值为空
]

.serializeArray() 方法使用了 W3C 关于 successful controls（有效控件）的标准来检测哪些元素应当包括在内。特别说明，元素不能被禁用（禁用的元素不会被包括在内），并且元素应当有含有 name 属性。提交按钮的值也不会被序列化。文件选择元素的数据也不会被序列化。

该方法可以对已选择单独表单元素的对象进行操作，比如 <input>, <textarea>, 和 <select>。不过，更方便的方法是，直接选择 <form> 标签自身来进行序列化操作。

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

上面的代码产生下面的数据结构（假设浏览器支持 console.log）：

[{name: avalue: 1},{name: bvalue: 2},{name: cvalue: 3},{name: dvalue: 4},{name: evalue: 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 + " ");
});

serialize()方法说明：

实例

输出序列化表单值的结果：

$("button").click(function(){$("div").text($("form").serialize());
});

亲自试一试

定义和用法

serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。

您可以选择一个或多个表单元素（比如 input 及/或文本框），或者 form 元素本身。

序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

语法

$(selector).serialize()

详细说明

.serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。

表单元素有几种类型：

<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>

.serialize() 方法可以操作已选取个别表单元素的 jQuery 对象，比如 <input>, <textarea> 以及 <select>。不过，选择 <form> 标签本身进行序列化一般更容易些：

$('form').submit(function() {alert($(this).serialize());return false;
});

输出标准的查询字符串：

a=1&b=2&c=3&d=4&e=5

注释：只会将”成功的控件“序列化为字符串。如果不使用按钮来提交表单，则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中，元素必须使用 name 属性。

转载于:https://www.cnblogs.com/itjeff/p/4284401.html