前端時(shí)間寫項(xiàng)目用到了ajaxForm這個(gè)插件，可以用它提交表單和上傳圖片，聽起來和正常的form表單提交沒什么區(qū)別，只不過是ajax提交，無需刷新頁面，如此可以增加用戶體驗(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)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
