使用AjaxSubmit()方法怎么實現Form提交表單后回調功能

今天就跟大家聊聊有關使用AjaxSubmit()方法怎么實現Form提交表單后回調功能，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

2.      ajaxSubmit()方法簡介

（1）ajaxSubmit()依賴

ajaxSubmit()方法是JQuery Form表單插件中的方法，要想使用該插件，可以直接去官網http://jquery.malsup.com/form/下載。使用時，需要在jsp或者html頁面上，引入JQuery庫和Form插件。

（2）ajaxSubmit()用法簡介

ajaxSubmit()方法接受0個或者1個參數，當為單個參數時，該參數既可以是一個回調函數，也可以是一個options對象。回調函數比較簡單，下面主要介紹一下options的用法。options對象可以設置的參數如下：

var options = { 
    target: ‘#output1',     //把服務器返回的內容放入id為output1的元素中 
    beforeSubmit: showRequest,   //提交前的回調函數 
    success: showResponse,     //提交后的回調函數 
    url: url,      //默認是form的action，如果聲明，則會覆蓋 
    type: type,   //默認是form的method，如果聲明，則會覆蓋 
    dataType: json ,  //接受服務端返回的類型 
    clearForm: true,  //成功提交后，清除所有表單元素的值 
    resetForm: true,  //成功提交后，重置所有表單元素的值 
    timeout: 3000    //限制請求的時間，當請求大于3秒后，跳出請求 
}；

這些參數里，比較常用的就是提交前的回調函數beforeSubmit和提交后的回調函數success。beforeSubmit主要是用來提交表單前，校驗數據的。示例代碼：

function validate(formData, jqForm, options) { 
    /* 
    在這里需要對表單元素進行驗證，如果不符合規則， 
    直接返回false來阻止表單提交。 
    */ 
    var queryString = $.param(formData);    //組裝數據 
    return true; 
}

這個回調函數有三個參數，formData是數組對象，jqForm是一個JQuery對象，它封裝了表單的元素，options參數就是options對象。在這個回調函數中，只要不返回false，表單都將被允許提交；如果返回false，則會阻止表單提交。

success是提交后的回調函數，有4個參數responseText，statusText，xhr，和$form。其中，比較常用的是前兩個。statusText只是一個返回狀態，例如success，error等。responseText攜帶著服務器返回的數據內容，它會根據設置的options對象中的dataType屬性來返回相應格式的內容。

3.      ajaxSubmit()方法代碼示例

下面是ajaxSubmit()方法使用的一個模板。

$(function(){   
    var options = {  
      type: 'POST', 
      url: '提交路徑', 
      success:showResponse,  
      dataType: 'json', 
      error : function(xhr, status, err) {       
        alert("操作失敗"); 
      } 
    };  
    $("##Form名稱").submit(function(){  
      $(this).ajaxSubmit(options);  
      return false;  //防止表單自動提交 
    }); 
}); 
/** 
 * 保存操作 
 */ 
function toSave(){  
  $("#Form名稱").submit(); 
} 
/** 
 * 保存后，執行回調 
 * @param responseText 
 * @param statusText 
 * @param xhr 
 * @param $form 
 */ 
function showResponse(responseText, statusText, xhr, $form){   
  if(responseText.status == "0"){ 
    /** 
    * 請求成功后的操作 
    */ 
    alert(responseText.msg); 
  } else { 
    alert(responseText.msg); 
  }   
}

看完上述內容，你們對使用AjaxSubmit()方法怎么實現Form提交表單后回調功能有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。