1-6 使用serialize()方法序列化表单元素值
本节编程练习不计算学习进度，请电脑登录imooc.com操作

使用serialize()方法序列化表单元素值

使用serialize()方法可以将表单中有name属性的元素值进行序列化，生成标准URL编码文本字符串，直接可用于ajax请求，它的调用格式如下：

$(selector).serialize()

其中selector参数是一个或多个表单中的元素或表单元素本身。

例如，在表单中添加多个元素，点击“序列化”按钮后，调用serialize()方法，将表单元素序列化后的标准URL编码文本字符串显示在页面中，如下图所示：

在浏览器中显示的效果：

从图中可以看出，当点击“序列化”按钮后，调用表单元素本身的serialize()方法，将表单中元素全部序列化，生成标准URL编码，各元素间通过&号相联。

任务

我来试试，亲自调用serialize()将表单中的元素值进行序列化

在下列代码的第35行，调用serialize()将表单中的元素值进行序列化，并将序列化后的字符串内容显示在页面元素中。

index.htmlstyle.css 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <title>使用serialize()方法序列化表单元素值</title>
  5.         <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
  6.         <link href="style.css" rel="stylesheet" type="text/css" />
  7.     </head>
  8.  
  9.     <body>
  10.         <div id="divtest">
  11.             <div class="title">
  12.                 <span class="fl">我的个人资料</span> 
  13.                 <span class="fr">
  14.                     <input id="btnAction" type="button" value="序列化" />
  15.                 </span>
  16.             </div>
  17.             <form action="">
  18.             <ul>
  19.                 <li>姓名：<input name="Text1" type="text" size="12" /></li>
  20.                 <li>
  21.                     <select name="Select1">
  22.                         <option value="0">男</option>
  23.                         <option value="1">女</option>
  24.                     </select>
  25.                 </li>
  26.                 <li><input name="Checkbox1" type="checkbox" />资料是否可见 </li>
  27.                 <li id="litest"></li>
  28.             </ul>
  29.             </form>
  30.         </div>
  31.  
  32.         <script type="text/javascript">
  33.             $(function () {
  34.                 $("#btnAction").bind("click", function () {
  35.                     ?
  36.                 })
  37.             })
  38.         </script>
  39.     </body>
  40. </html>
  1. #divtest
  2. {
  3.     width: 282px;
  4. }
  5. #divtest .title
  6. {
  7.     padding: 8px;
  8.     background-color:blue;
  9.     color:#fff;
  10.     height: 23px;
  11.     line-height: 23px;
  12.     font-size: 15px;
  13.     font-weight: bold;
  14. }
  15. ul
  16. {
  17.     float: left;
  18.     width: 280px;
  19.     padding: 5px 0px;
  20.     margin: 0px;
  21.     font-size: 14px;
  22.     list-style-type: none;
  23. }
  24. ul li
  25. {
  26.     float: left;
  27.     width: 280px;
  28.     height: 23px;
  29.     line-height: 23px;
  30.     padding: 3px 8px;
  31. }
  32. .fl
  33. {
  34.     float: left;
  35. }
  36. .fr
  37. {
  38.     float: right;
  39. }
下一节