在jQuery中,当我们使用ajax时,常常需要拼装input数据以键值对(Key/Value)的形式发送到服务器,用JQuery的serialize方法可以轻松的完成这个工作,使用这个方法可以将表单序列化为键值对(key1=value1&key2=value2…)后提交。下面介绍JQuery中serialize()的用法
serialize()方法通过序列化表单值,创建URL编码文本字符串,可以选择一个或多个表单元素(比如 input 及/或 文本框),或直接选择form本身,将其序列化后用于ajax请求,如:username=xxx&password=yyy
注释:只会将”成功的控件“序列化为字符串。如果不使用按钮来提交表单,则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中,元素必须使用 name 属性
var data = $('form').serialize();
将表单内容序列化成一个字符串
username=forrest&passwd=1234&gender=0&interest=swimming&interest=running&interest=readBook
1.在ajax提交表单数据时,就不用一一列举出每一个参数。只需将data参数设置为$("form").serialize()
2.用字符串方式时,需要注意对字符编码(中文问题),如果不希望编码带来麻烦,可以使用serialize()方法,它会自动编码
这样,我们就可以把序列化的值传给ajax()作为url的参数,轻松使用ajax()提交form表单了,而不需要一个一个获取表单中的值然后传给ajax()
$.ajax({ type: 'post', url: 'your url', data: $("form").serialize(), success: function(data) { // your code }, error: function(error){alert(error); });使用$.post()、$.get()和$.getJSON()也是一样的
$.post('your url', $("form").serialize(), function(data) { // your code } }); $.get('your url', $("form").serialize(), function(data) { // your code } }); $.getJSON('your url', $("form").serialize(), function(data) { // your code } });JQuery中serializeArray方法是序列化表单元素(类似'.serialize()'方法)返回JSON数据结构数据
serializeArray()序列化表单元素为JSON数据
var jsonData = $("form").serializeArray();
将页面表单序列化成一个JSON结构的对象。注意不是JSON字符串
[{"name":"lihui", "age":"20"},{...}] 获取数据为 jsonData[0].name
在使用ajax提交表单数据时,以上两种方法都可以将data参数设置为$(form).serialize()或$(form).serializeArray()
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="js/jquery-3.1.1.min.js"></script> <script> function t(){ var str1 = $("form").serialize(); var str2 = $("form").serializeArray(); alert("serialize="+str1+" serializeArray="+str2); } </script> </head> <body> <form> <input type="text" name="username" /> <input type="text" name="age" > <input type="password" name="password" /> <input type="button" onclick="t();"> </form> </body> </html>$.param()方法是serialize()方法的核心,用来对一个数组或对象按照key/value进行序列化
比如将一个普通的对象序列化:
var obj = {a:1,b:2,c:3};
var k = $.param(obj);
alert(k); //输出a=1&b=2&c=3
相关资源:敏捷开发V1.0.pptx