表單插件——form
通過表單form插件，調(diào)用ajaxForm()方法，實(shí)現(xiàn)ajax方式向服務(wù)器提交表單數(shù)據(jù)，并通過方法中的options對(duì)象獲取服務(wù)器返回?cái)?shù)據(jù)，調(diào)用格式如下：
$(form). ajaxForm ({options})
其中form參數(shù)表示表單元素名稱；options是一個(gè)配置對(duì)象，用于在發(fā)送ajax請(qǐng)求過程，設(shè)置發(fā)送時(shí)的數(shù)據(jù)和參數(shù)。
例如，在頁(yè)面中點(diǎn)擊“提交”按鈕，調(diào)用form插件的
ajaxForm()方法向服務(wù)器發(fā)送錄入的用戶名和密碼數(shù)據(jù)，服務(wù)器接收后返回并顯示在頁(yè)面中，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，當(dāng)點(diǎn)擊“提交”按鈕時(shí)，調(diào)用form表單插件中的ajaxForm()方法向指定的服務(wù)器以ajax方式發(fā)送數(shù)據(jù)，服務(wù)器接收后返回并將數(shù)據(jù)顯示。
任務(wù)
我來(lái)試試，親自調(diào)用form表單插件向服務(wù)器發(fā)送數(shù)據(jù)，并接收返回信息。
在下列代碼的第35行，調(diào)用form表單插件中的ajaxForm()方法向服務(wù)器以ajax方式向服務(wù)器發(fā)送表單中的數(shù)據(jù)。
- ?不會(huì)了怎么辦
-
- 首先，使用選擇器獲取表單元素，然后，調(diào)用表單插件的
ajaxForm()或ajaxSubmit()方法向服務(wù)器發(fā)送表單數(shù)據(jù)，并在方法中添加“options”對(duì)象。
- “ajaxForm”方法名稱是否正確，注意區(qū)分大小寫。
<!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>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://idcbgp.cn/data/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://idcbgp.cn/data/jquery.form.js"></script>
</head>
<body>
<form id="frmV" method="post" action="#">
<div id="divtest">
<div class="title">
<span class="fl">個(gè)人信息頁(yè)</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: "http://idcbgp.cn/data/form_f.php",
target: ".tip"
}
?
});
</script>
</body>
</html>
#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;
}
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
