jq serializeArray() 方法的介绍与使用
墨初 前端设计 2404阅读
在前台的表单提交中,如果涉及到了批量操作,那么使用 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>
控制台输出结果:
[ {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: ""} ]