jQuery表單插件ajaxForm實例詳解
更新時間：2017年01月17日 08:45:13 作者：小舵主2016
前端時間寫項目用到了ajaxForm這個插件，可以用它提交表單和上傳圖片，聽起來和正常的form表單提交沒什么區(qū)別，只不過是ajax提交，無需刷新頁面,下面通過實例給大家介紹jQuery表單插件ajaxForm，需要的朋友參考下吧
前端時間寫項目用到了ajaxForm這個插件，可以用它提交表單和上傳圖片，聽起來和正常的form表單提交沒什么區(qū)別，只不過是ajax提交，無需刷新頁面，如此可以增加用戶體驗度。
引入兩個文件，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"> 標題：<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>
用法大概就是這樣，其中遇到兩個坑，本人把ajaxform封裝了一個方法，因為項目中多次用到，然后用的同步請求，這樣好做處理，但是沒有圖片上傳的情況下，同步是可以的，能夠兼容到ie7，但是如果有圖片上傳，ie 7、8、9 同步就無法做處理了，只能異步了，所以當時只能寫成異步了，在success中分別做的處理，比較蛋疼……
以上所述是小編給大家介紹的jQuery表單插件ajaxForm實例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關(guān)文章
使用jQuery.form.js/springmvc框架實現(xiàn)文件上傳功能
這篇文章主要介紹了使用jQuery.form.js/springmvc框架實現(xiàn)文件上傳功能，非常具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
這篇文章主要介紹了在JavaScript中重寫jQuery對象的方法,在某些情況下jQuery無法滿足應(yīng)用開發(fā)的時候可以采用javascript重寫jQuery方法來滿足功能的實現(xiàn),需要的朋友可以參考下2014-08-08
實現(xiàn)easyui的datagrid導(dǎo)出為excel的示例代碼
下面小編就為大家?guī)硪黄獙崿F(xiàn)easyui的datagrid導(dǎo)出為excel的示例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
使用jQuery插件創(chuàng)建常規(guī)模態(tài)窗口登陸效果
隱藏模態(tài)窗口技術(shù)是一種很好的解決方案，用于處理不是特有必要出現(xiàn)在網(wǎng)頁上的界面元素，下面與大家分享下如何利用jQuery插件leanModal建立一個常規(guī)模態(tài)窗口2013-08-08
jQuery基于$.ajax設(shè)置移動端click超時處理方法
這篇文章主要介紹了jQuery基于$.ajax設(shè)置移動端click超時處理方法,分析了click事件與touchstart事件的原理與處理技巧,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了jQuery插件zTree實現(xiàn)的多選樹效果,結(jié)合實例形式分析了jQuery樹形插件zTree實現(xiàn)多選樹效果的具體操作步驟與相關(guān)注意事項,需要的朋友可以參考下2017-03-03
jQuery學(xué)習(xí)筆記之控制頁面實現(xiàn)代碼
每一段jQuery對應(yīng)一段html代碼，以標記為準則,css為共用代碼，每段代碼需獨立運行。html和css代碼在文章尾部，如下例2012-02-02
jQuery數(shù)據(jù)顯示插件整合實現(xiàn)代碼
由于我們公司的產(chǎn)品涉及到很多的表格數(shù)據(jù)顯示，而且每張表的字段數(shù)都很多，在工作過程中(幾任同仁的努力)，整合出一套自認為較為輕巧的方案2011-10-10
這篇文章主要介紹了Jquery異步上傳文件代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了jQuery實現(xiàn)web頁面櫻花墜落的特效,效果非常棒，需要的朋友可以參考下2017-06-06