表单插件——form
通过表单form插件，调用ajaxForm()方法，实现ajax方式向服务器提交表单数据，并通过方法中的options对象获取服务器返回数据，调用格式如下：
$(form). ajaxForm ({options})
其中form参数表示表单元素名称；options是一个配置对象，用于在发送ajax请求过程，设置发送时的数据和参数。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>表单插件</title>
<script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://www.imooc.com/data/jquery.form.js"></script>
<style>
#divtest
{
width: 282px;
}
#divtest .title
{
padding: 8px;
background-color: Blue;
color: #fff;
height: 23px;
line-height: 23px;
font-size: 15px;
font-weight: bold;
}
#divtest .content
{
padding: 8px 0px;
background-color: #fff;
font-size: 13px;
}
#divtest .content .tip
{
text-align:center;
border:solid 1px #ccc;
background-color:#eee;
margin:20px 0px;
padding:8px;
}
.fl
{
float: left;
}
.fr
{
float: right;
}
</style>
</head> <body>
<form id="frmV" method="post" action="#">
<div id="divtest">
<div class="title">
<span class="fl">个人信息页</span>
<span class="fr">
<input id="btnSubmit" type="submit" value="提交" />
</span>
</div>
<div class="content">
<span class="fl">用户名：</span><br />
<input id="user" name="user" type="text" /><br />
<span class="fl">昵称：</span><br />
<input id="nick" name="nick" type="text" />
<div class="tip"></div>
</div>
</div>
</form> <script type="text/javascript">
$(function () {
var options = {
url: "9-2.php",
target: ".tip"
}
$("#frmV").ajaxForm(options);
});
</script>
</body>
</html>
<?php
$user = $_POST['user'];
$nick = $_POST['nick'];
echo "用户名：".$user."昵称:".$nick;