表单插件——form
通过表单form插件，调用ajaxForm()方法，实现ajax方式向服务器提交表单数据，并通过方法中的options对象获取服务器返回数据，调用格式如下：
$(form). ajaxForm ({options})
其中form参数表示表单元素名称；options是一个配置对象，用于在发送ajax请求过程，设置发送时的数据和参数。
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 <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script> 6 <script type="text/javascript" src="http://www.imooc.com/data/jquery.form.js"></script> 7 <style> 8 #divtest 9 { 10 282px; 11 } 12 #divtest .title 13 { 14 padding: 8px; 15 background-color: Blue; 16 color: #fff; 17 height: 23px; 18 line-height: 23px; 19 font-size: 15px; 20 font-weight: bold; 21 } 22 #divtest .content 23 { 24 padding: 8px 0px; 25 background-color: #fff; 26 font-size: 13px; 27 } 28 #divtest .content .tip 29 { 30 text-align:center; 31 border:solid 1px #ccc; 32 background-color:#eee; 33 margin:20px 0px; 34 padding:8px; 35 } 36 .fl 37 { 38 float: left; 39 } 40 .fr 41 { 42 float: right; 43 } 44 </style> 45 </head> 46 47 <body> 48 <form id="frmV" method="post" action="#"> 49 <div id="divtest"> 50 <div class="title"> 51 <span class="fl">个人信息页</span> 52 <span class="fr"> 53 <input id="btnSubmit" type="submit" value="提交" /> 54 </span> 55 </div> 56 <div class="content"> 57 <span class="fl">用户名：</span><br /> 58 <input id="user" name="user" type="text" /><br /> 59 <span class="fl">昵称：</span><br /> 60 <input id="nick" name="nick" type="text" /> 61 <div class="tip"></div> 62 </div> 63 </div> 64 </form> 65 66 <script type="text/javascript"> 67 $(function () { 68 var options = { 69 url: "9-2.php", 70 target: ".tip" 71 } 72 $("#frmV").ajaxForm(options); 73 }); 74 </script> 75 </body> 76 </html>
1 <?php 2 $user = $_POST['user']; 3 $nick = $_POST['nick']; 4 echo "用户名：".$user."昵称:".$nick;