serialize()
在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()方法,它会自动编码
实例
<form action="">
First name: <input type="text" name="FirstName" value="Bill" /><br />
Last name: <input type="text" name="LastName" value="Gates" /><br />
</form>
<script>
$(document).ready(function(){
console.log($("form").serialize()); // FirstName=Bill&LastName=Gates
});
</script>
这样,我们就可以把序列化的值传给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
}
});
serializeArray()方法
JQuery中serializeArray方法是序列化表单元素(类似'.serialize()'方法)返回JSON数据结构数据
serializeArray()序列化表单元素为JSON数据
格式
var jsonData = $("form").serializeArray();
功能
将页面表单序列化成一个JSON结构的对象。注意不是JSON字符串
返回结果:
[{"name":"lihui", "age":"20"},{...}] 获取数据为 jsonData[0].name
实例
var fields = $("select, :radio").serializeArray();
jQuery.each( fields, function(i, field){
$("#results").append(field.name + "=" +field.value + "; ");
});//username=forrest; passwd=1234; gender=0; interest=swimming; interest=running; interest=readBook;
在使用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()方法
$.param()方法是serialize()方法的核心,用来对一个数组或对象按照key/value进行序列化
比如将一个普通的对象序列化:
var obj = {a:1,b:2,c:3};
var k = $.param(obj);
alert(k); //输出a=1&b=2&c=3