.serialize()| jqueryAPI 2.2 中文手册- AspRain.cn 致力于Web开发技术翻译整理

jQuery API 2.2.0

.serialize()

分类:表单 | Ajax > 辅助函数

返回: 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>

演示结果

如果网页上不能运行示例,请点击http://www.asprain.cn/jQueryAPI/serialize.htm查看示例。

如果你觉得本文档对你有用,欢迎给翻译作者支付宝打赏,支持翻译作者源源不断翻译更多有用的技术文档。