.serialize()
返回: String
.serialize()
描述:把一个表单元素集合编码为一个字符串,用于提交。
加入于: 1.0
.serialize()该方法不接受任何参数
.serialize()方法以标准URL编码记号法创建了一个文本字符串。它可以对一个选择了一个表单控件的jQuery对象进行操作,表单控件比如说<input>、<textarea>和<select>:
然而,它非常易用,只要选择<form>本身,以序列化:
$( "form" ).on( "submit", function( event ) {
event.preventDefault();
console.log( $( this ).serialize() );
});
在这种情况下,jQuery序列化了表单内部的有结果的控件。只有form元素检查它们所包含的输入框,在别的情况下,要想序列化输入框元素,输入框元素必须成为传递给.serialize()方法的集合的一部分。在集合中选择表单和它的子元素将导致序列化字符串中出现重复。
注意:只有“有结果的控件”会被序列化到字符串中。非提交按钮的值也会被序列化,因为表单不使用一个按钮来提交。对于被包含在序列化字符串中的表单元素的值,该元素必须有一个元素属性name。来自勾选框和单选钮的值(type="checkbox"的<input>或type="radio"的<input>),只有在它们被点选中的情况下才包含在内。来自文件选择元素中的数据不会被序列化。
示例
把一个表单序列化成一个查询字符串,可以在一个Ajax请求中发送给服务器:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>serialize demo</title>
<style>
body, select {
font-size: 12px;
}
form {
margin: 5px;
}
p {
color: red;
margin: 5px;
font-size: 14px;
}
b {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<form>
<select name="single">
<option>Single</option>
<option>Single2</option>
</select>
<br>
<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" id="ch1">
<label for="ch1">check1</label>
<input type="checkbox" name="check" value="check2" checked="checked" id="ch2">
<label for="ch2">check2</label>
<br>
<input type="radio" name="radio" value="radio1" checked="checked" id="r1">
<label for="r1">radio1</label>
<input type="radio" name="radio" value="radio2" id="r2">
<label for="r2">radio2</label>
</form>
<p><tt id="results"></tt></p>
<script>
function showValues() {
var str = $( "form" ).serialize();
$( "#results" ).text( str );
}
$( "input[type='checkbox'], input[type='radio']" ).on( "click", showValues );
$( "select" ).on( "change", showValues );
showValues();
</script>
</body>
</html>
演示结果