jQuery表單插件ajaxForm實(shí)例詳解
前端時(shí)間寫項(xiàng)目用到了ajaxForm這個(gè)插件，可以用它提交表單和上傳圖片，聽起來和正常的form表單提交沒什么區(qū)別，只不過是ajax提交，無需刷新頁(yè)面，如此可以增加用戶體驗(yàn)度。
引入兩個(gè)文件，PS：必須
<script type="text/javascript" src="http://img9.tongzhuo100.com/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="http://img9.tongzhuo100.com/js/jquery.form.min.js"></script>
使用方法如下：
html代碼：
<form method="post" action="#" id="submit"> 標(biāo)題：<input type="text" name="title" value=""/> 圖片：<input type="file" name="image"/> <input type="button" value="提交" id="button"/> </form>
js代碼：
<script type="text/javascript">
$('#button').click(function(){
var options = {
type:'post', //post提交
url:'http://ask.tongzhuo100.com/server/****.php?='+Math.random(), //url
dataType:"json", //json格式
data:{'name':name,....}, //如果需要提交附加參數(shù)，視情況添加
clearForm: true, //成功提交后，清除所有表單元素的值
resetForm: true, //成功提交后，重置所有表單元素的值
cache:false,
async:false, //同步返回
success:function(data){
//服務(wù)器端返回處理邏輯
},
error:function(XmlHttpRequest,textStatus,errorThrown){
alert('操作失敗');
}
};
$('#submit').ajaxSubmit(options);
})
</script>
用法大概就是這樣，其中遇到兩個(gè)坑，本人把a(bǔ)jaxform封裝了一個(gè)方法，因?yàn)轫?xiàng)目中多次用到，然后用的同步請(qǐng)求，這樣好做處理，但是沒有圖片上傳的情況下，同步是可以的，能夠兼容到ie7，但是如果有圖片上傳，ie 7、8、9 同步就無法做處理了，只能異步了，所以當(dāng)時(shí)只能寫成異步了，在success中分別做的處理，比較蛋疼……
以上所述是小編給大家介紹的jQuery表單插件ajaxForm實(shí)例詳解，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- jQuery實(shí)現(xiàn)獲取form表單內(nèi)容及綁定數(shù)據(jù)到form表單操作分析
- jQuery實(shí)現(xiàn)form表單序列化轉(zhuǎn)換為json對(duì)象功能示例
- 關(guān)于jquery form表單序列化的注意事項(xiàng)詳解
- JQuery form表單提交前驗(yàn)證單選框是否選中、刪除記錄時(shí)驗(yàn)證經(jīng)驗(yàn)總結(jié)(整理)
- jquery.form.js異步提交表單詳解
- jquery表單插件form使用方法詳解
- jQuery Form表單取值的方法
- jquery獲取form表單input元素值的簡(jiǎn)單實(shí)例
- Jquery讓form表單異步提交代碼實(shí)現(xiàn)
相關(guān)文章
使用jQuery.form.js/springmvc框架實(shí)現(xiàn)文件上傳功能
這篇文章主要介紹了使用jQuery.form.js/springmvc框架實(shí)現(xiàn)文件上傳功能，非常具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
在JavaScript中重寫jQuery對(duì)象的方法實(shí)例教程
這篇文章主要介紹了在JavaScript中重寫jQuery對(duì)象的方法,在某些情況下jQuery無法滿足應(yīng)用開發(fā)的時(shí)候可以采用javascript重寫jQuery方法來滿足功能的實(shí)現(xiàn),需要的朋友可以參考下2014-08-08
實(shí)現(xiàn)easyui的datagrid導(dǎo)出為excel的示例代碼
下面小編就為大家?guī)硪黄獙?shí)現(xiàn)easyui的datagrid導(dǎo)出為excel的示例代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
使用jQuery插件創(chuàng)建常規(guī)模態(tài)窗口登陸效果
隱藏模態(tài)窗口技術(shù)是一種很好的解決方案，用于處理不是特有必要出現(xiàn)在網(wǎng)頁(yè)上的界面元素，下面與大家分享下如何利用jQuery插件leanModal建立一個(gè)常規(guī)模態(tài)窗口2013-08-08
jQuery基于$.ajax設(shè)置移動(dòng)端click超時(shí)處理方法
這篇文章主要介紹了jQuery基于$.ajax設(shè)置移動(dòng)端click超時(shí)處理方法,分析了click事件與touchstart事件的原理與處理技巧,需要的朋友可以參考下2016-05-05
jQuery插件zTree實(shí)現(xiàn)的多選樹效果示例
這篇文章主要介紹了jQuery插件zTree實(shí)現(xiàn)的多選樹效果,結(jié)合實(shí)例形式分析了jQuery樹形插件zTree實(shí)現(xiàn)多選樹效果的具體操作步驟與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-03-03
jQuery學(xué)習(xí)筆記之控制頁(yè)面實(shí)現(xiàn)代碼
每一段jQuery對(duì)應(yīng)一段html代碼，以標(biāo)記為準(zhǔn)則,css為共用代碼，每段代碼需獨(dú)立運(yùn)行。html和css代碼在文章尾部，如下例2012-02-02
jQuery數(shù)據(jù)顯示插件整合實(shí)現(xiàn)代碼
由于我們公司的產(chǎn)品涉及到很多的表格數(shù)據(jù)顯示，而且每張表的字段數(shù)都很多，在工作過程中(幾任同仁的努力)，整合出一套自認(rèn)為較為輕巧的方案2011-10-10
這篇文章主要介紹了Jquery異步上傳文件代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
jQuery實(shí)現(xiàn)web頁(yè)面櫻花墜落的特效
這篇文章主要介紹了jQuery實(shí)現(xiàn)web頁(yè)面櫻花墜落的特效,效果非常棒，需要的朋友可以參考下2017-06-06