jquery.form.js免費版是一個功能強大的jQuery特效制作小插件。jquery.form.js免費版使用起來十分的方便。jquery.form.js是一款jquery插件,通過該插件,我們可以非常簡單的實現表單的異步提交,并實現文件上傳、進度條顯示等等。
jquery.form.js基本簡介
jquery.form.js是form插件,jquery.form.js免費版支持ajax表單提交和ajax文件上傳。
該框架集form提交、驗證和上傳功能于一體。
該框架應與jquery完整版結合,否則使用min無效。
原理:使用js將form組裝成ajax的url和data,原理由ajax提交,實際上完全可以自己寫,但有這個框架可能更簡單。
jQuery.form.js是form插件,支持ajax表單提交和ajax文件上傳。下載地址APIajaxForm,增加所有必要的事件監聽器,為ajax提交表格做準備。ajaxForm不能提交表格。
在一個頁面上使用一個表格,但根據情況向不同的地址提交處理,即同一個表格有多個提交,或者一個表格提交不同的參數值。
必須引入jquery(或js)文件。
最好將jquery(或js)的代碼放在表格下面,以確保通過id獲得元素。
jquery.form.js使用方法:
一、jQuery.Form.js 插件的作用是實現Ajax提交表單。
方法:
1.formSerilize() 用于序列化表單中的數據,并將其自動整理成適合AJAX異步請求的URL地址格式。
2.clearForm() 清除表單中所有輸入值的內容。
3.restForm 重置表單中所有的字段內容。即將所有表單中的字段恢復到頁面加載時的默認值。
疑問:ajaxForm()與ajaxSubmit()的區別:
答案:$("#form1").ajaxForm(); 相當于以下兩行:
$("#form1".submit)(function(){
$("#form1").ajaxSubmit();
return false;
}) //也就是說ajaxFrom()會自動阻止表單提交。而ajaxSubmit()不會自動阻止表單提交,想阻止表單提交,要自己return false;
技巧1:如果希望表單提交完成后不跳轉,那么一行簡單的代碼就能夠實現,幾乎與不使用表單提交是一樣的:
$("#MailForm").ajaxSubmit(function(message) {
alert("表單提交已成功!");
});
注意:ajaxForm()與ajaxForm()都可以沒有參數或者接受1個參數。該參數既可以是一個回調函數,也可以是一個options對象。該對象功能非常強大,說明如下:
var options={
url:url, //form提交數據的地址
type:type, //form提交的方式(method:post/get)
target:target, //服務器返回的響應數據顯示在元素(Id)號確定
beforeSubmit:function(), //提交前執行的回調函數
success:function(), //提交成功后執行的回調函數
dataType:null, //服務器返回數據類型
clearForm:true, //提交成功后是否清空表單中的字段值
restForm:true, //提交成功后是否重置表單中的字段值,即恢復到頁面加載時的狀態
timeout:6000 //設置請求時間,超過該時間后,自動退出請求,單位(毫秒)。
}
例子:
頁面js代碼:
<script src="jQuery.1.8.3.js" type="text/javascript"></script>
<script src="jQuery.Form.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(":submit").click(function () {
var options = {
url: "indexAjax.aspx",
target: "#div2",
success: function () {
alert("ajax請求成功");
}
};
$("#form1").ajaxForm(options);
})
})
</script>
<div id="div1">
<form id="form1" method="get" action="#">
<p>我的名字:<input type="text" name="name" value="請輸入內容" /></p>
<p>我的偶像是:<input type="radio" name="Idol" value="劉德華" />劉德華 <input type="radio" name="Idol" value="張學友" />張學友</p>
<p>我喜歡的音樂類型:<input type="checkbox" name="musictype" value="1.搖滾">搖滾 <input type="checkbox" name="musictype" value="2.輕松">輕柔 <input type="checkbox" name="musictype" value="3.爵士">爵士</p>
<p><input type="submit" value="確認" /></p>
</form>
</div>
<div id="div2">
</div>
后臺:indexAjax.aspx.cs代碼
protected void Page_Load(object sender, EventArgs e)
{
string strName = Request["name"];
string strIdol = Request["Idol"];
string strMusicType = Request["musictype"];
Response.Clear();
Response.Write("我的名字是:" + strName + "; 我的偶像是:" + strIdol + "; 我喜歡的音樂類型:" + strMusicType);
Response.End();
}