在前台的表单提交中,如果涉及到了批量操作,那么使用 jq 的 serializeArray() 方法,将 form 表单的值通过序列化转换成为一个对象的数组,然后提交给后台,那么在后台就能够很轻松的对数据进行处理。

jq serializeArray() 方法的介绍

serializeArray():通过序列化表单值来创建对象(name 和 value)的数组。

语法:

$(selector).serializeArray()

返回值:

serializeArray() 方法返回的是 JSON 对象而非 JSON 字符串

注意:

返回的 JSON 对象是由一个对象数组组成的,其中每个对象包含一个名(name 参数)或名与值的对(name 参数和 value 参数

输出的格式:

[
    {name: 'name1', value: 'value1'},
    {name: 'name2', value: 'value2'},
    {name: 'name2'}, // 没有 value 值
]

jq serializeArray() 使用方法

示例1:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<form action="">
    <input type="text" name="name" value="小明" />
    <input type="text" name="age" value="20" />
    <input type="text" name="add" value="上每" />
</form>
<script>
    var str = $('form').serializeArray();
    console.log(str);
</script>
</body>
</html>

控制台输出结果:

jq serializeArray() 方法的介绍与使用

[
    {name: "name", value: "小明"}
    {name: "age", value: "20"}
    {name: "add", value: "上每"}
]

示例2:

html代码:

<form action="">
    <input type="text" name="host" value="http://www.feiniaomy.com" />
    <input type="text" name="name" value="飞鸟慕鱼博客" />
    <input type="text" name="author"  />
</form>
<!--js代码与上面的示例相同-->

控制台输出结果:

[
    {name: "host", value: "http://www.feiniaomy.com"}
    {name: "name", value: "飞鸟慕鱼博客"}
    {name: "author", value: ""}
]