jQuery中表單插件ajaxForm怎么用

這篇文章主要介紹jQuery中表單插件ajaxForm怎么用，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

前端時間寫項目用到了ajaxForm這個插件，可以用它提交表單和上傳圖片，聽起來和正常的form表單提交沒什么區別，只不過是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,....},    //如果需要提交附加參數，視情況添加
      clearForm: true,        //成功提交后，清除所有表單元素的值
      resetForm: true,        //成功提交后，重置所有表單元素的值
      cache:false,          
      async:false,          //同步返回
      success:function(data){
        //服務器端返回處理邏輯
      },
      error:function(XmlHttpRequest,textStatus,errorThrown){
        alert('操作失敗');
      }
    };
    $('#submit').ajaxSubmit(options);
  })
</script>

用法大概就是這樣，其中遇到兩個坑，本人把ajaxform封裝了一個方法，因為項目中多次用到，然后用的同步請求，這樣好做處理，但是沒有圖片上傳的情況下，同步是可以的，能夠兼容到ie7，但是如果有圖片上傳，ie 7、8、9 同步就無法做處理了，只能異步了，所以當時只能寫成異步了。

以上是“jQuery中表單插件ajaxForm怎么用”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！