2-2 表单插件——form
本节编程练习不计算学习进度，请电脑登录imooc.com操作

表单插件——form

通过表单form插件，调用ajaxForm()方法，实现ajax方式向服务器提交表单数据，并通过方法中的options对象获取服务器返回数据，调用格式如下：

$(form). ajaxForm ({options})

其中form参数表示表单元素名称；options是一个配置对象，用于在发送ajax请求过程，设置发送时的数据和参数。

例如，在页面中点击“提交”按钮，调用form插件的
ajaxForm()方法向服务器发送录入的用户名和密码数据，服务器接收后返回并显示在页面中，如下图所示：

在浏览器中显示的效果：

从图中可以看出，当点击“提交”按钮时，调用form表单插件中的ajaxForm()方法向指定的服务器以ajax方式发送数据，服务器接收后返回并将数据显示。

任务

我来试试，亲自调用form表单插件向服务器发送数据，并接收返回信息。

在下列代码的第35行，调用form表单插件中的ajaxForm()方法向服务器以ajax方式向服务器发送表单中的数据。

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>表单插件</title>
  5.         <link href="style.css" rel="stylesheet" type="text/css" />
  6.         <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
  7.         <script type="text/javascript" src="http://www.imooc.com/data/jquery.form.js"></script>
  8.     </head>
  9.  
  10.     <body>
  11.         <form id="frmV" method="post" action="#">
  12.             <div id="divtest">
  13.                 <div class="title">
  14.                     <span class="fl">个人信息页</span> 
  15.                     <span class="fr">
  16.                         <input id="btnSubmit" type="submit" value="提交" />
  17.                     </span>
  18.                 </div>
  19.                 <div class="content">
  20.                     <span class="fl">用户名：</span><br />
  21.                     <input id="user" name="user" type="text" /><br />
  22.                     <span class="fl">昵称：</span><br />
  23.                     <input id="nick" name="nick" type="text" />
  24.                     <div class="tip"></div>
  25.                 </div>
  26.             </div>
  27.         </form>
  28.  
  29.         <script type="text/javascript">
  30.             $(function () {
  31.                 var options = {
  32.                     url: "http://www.imooc.com/data/form_f.php", 
  33.                     target: ".tip"
  34.                 }
  35.                 ?
  36.             });
  37.         </script>
  38.     </body>
  39. </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. #divtest .content
  16. {
  17.     padding: 8px 0px;
  18.     background-color: #fff;
  19.     font-size: 13px;
  20. }
  21. #divtest .content .tip
  22. {
  23.     text-align:center;
  24.     border:solid 1px #ccc;
  25.     background-color:#eee;
  26.     margin:20px 0px;
  27.     padding:8px;
  28. }
  29. .fl
  30. {
  31.     float: left;
  32. }
  33. .fr
  34. {
  35.     float: right;
  36. }
下一节