# .serialize()

所属分类：表单 | Ajax > 辅助函数 英文文档：.serialize()

## .serialize()返回: String

描述: 将用作提交的表单元素的值编译成字符串。

- #### 添加的版本: 1.0.serialize()

  - 这个方法不接受任何参数。

`.serialize()` 方法使用标准的 URL-encoded 符号上建立一个文本字符串. 它可以对一个代表一组表单元素的 jQuery 对象进行操作，比如`<input>`, `<textarea>`, 和 `<select>`: `$( "input, textarea, select" ).serialize();`：

`<form>` 序列化很容易：

1 2 3 4 |
    $( "form" ).on( "submit", function( event ) {  event.preventDefault();  console.log( $( this ).serialize() );});

在这种情况下，jQuery成功的控制表单的序列化。只有`form`元素检查它们所包含的输入框，在所有其他情况下，输入元素要序列化应该是集合的一部分传递给`.serialize()`方法。选择集合中表单和它子元素在序列化的字符串会导致重复。

注意: 只有 "successful controls"可以被序列化成字符串。其中，提交按钮的值不会被序列化。另外，如果想要一个表单元素的值被序列化成字符串，这个元素必须含有 `name` 属性。此外，复选框（checkbox）和单选按钮（radio）(`input` 类型为 "radio" 或 "checkbox")的值只有在被选中时才会被序列化。另外，文件选择元素的数据也不会被序列化。

## 例子:

#### 把一个表单序列化成一个查询字符串，使之能够在一个Ajax请求中发送。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
    <!DOCTYPE html><html><head>  <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-latest.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);    }    $(":checkbox, :radio").click(showValues);    $("select").change(showValues);    showValues();</script> </body></html>

#### Demo: