加载中...

serialize()

概述    .serialize()

返回值：String

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

  • V : 1.0.serialize()

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

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

<form> 序列化很容易： 

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

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

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

示例

实例

序列表表格内容为字符串，用于 Ajax 请求。

HTML 代码: 
  1. <p id="results"><b>Results: </b> </p>
  2. <form>
  3.   <select name="single">
  4.     <option>Single</option>
  5.     <option>Single2</option>
  6.   </select>
  7.   <select name="multiple" multiple="multiple">
  8.     <option selected="selected">Multiple</option>
  9.     <option>Multiple2</option>
  10.     <option selected="selected">Multiple3</option>
  11.   </select><br/>
  12.   <input type="checkbox" name="check" value="check1"/> check1
  13.   <input type="checkbox" name="check" value="check2" checked="checked"/> check2
  14.   <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
  15.   <input type="radio" name="radio" value="radio2"/> radio2
  16. </form>
jQuery 代码: 
  1. $("#results").append( "<tt>" + $("form").serialize() + "</tt>" );

实例

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <style>
  5.   body, select { font-size:12px; }
  6.   form { margin:5px; }
  7.   p { color:red; margin:5px; font-size:14px; }
  8.   b { color:blue; }
  9.   </style>
  10.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  11. </head>
  12. <body>
  13.  
  14.  
  15. <form>
  16.   <select name="single">
  17.     <option>Single</option>
  18.     <option>Single2</option>
  19.   </select>
  20.  
  21.   <br />
  22.   <select name="multiple" multiple="multiple">
  23.     <option selected="selected">Multiple</option>
  24.     <option>Multiple2</option>
  25.  
  26.     <option selected="selected">Multiple3</option>
  27.   </select>
  28.   <br/>
  29.   <input type="checkbox" name="check" value="check1" id="ch1"/>
  30.  
  31.   <label for="ch1">check1</label>
  32.  
  33.   <input type="checkbox" name="check" value="check2" checked="checked" id="ch2"/>
  34.  
  35.   <label for="ch2">check2</label>
  36.   <br />
  37.   <input type="radio" name="radio" value="radio1" checked="checked" id="r1"/>
  38.  
  39.   <label for="r1">radio1</label>
  40.   <input type="radio" name="radio" value="radio2" id="r2"/>
  41.  
  42.   <label for="r2">radio2</label>
  43. </form>
  44. <p><tt id="results"></tt></p>
  45. <script>
  46.     function showValues() {
  47.       var str = $("form").serialize();
  48.       $("#results").text(str);
  49.     }
  50.     $(":checkbox, :radio").click(showValues);
  51.     $("select").change(showValues);
  52.     showValues();
  53. </script>
  54.  
  55. </body>
  56. </html>

运行一下

还没有评论.