.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>
演示结果