亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

利用AjaxSubmit()方法實現(xiàn)Form提交表單后回調(diào)功能

 更新時間:2018年05月16日 09:57:39   作者:Kevin_zhai  
ajaxSubmit()方法是JQuery Form表單插件中的方法,使用時,需要在jsp或者h(yuǎn)tml頁面上,引入JQuery庫和Form插件。接下來通過本文給大家分享通過AjaxSubmit()方法實現(xiàn)Form提交表單后回調(diào)功能,感興趣的朋友跟隨腳本之家小編一起看看吧

1.      背景

最近在工作中,需要實現(xiàn)網(wǎng)頁端圖片上傳到FTP服務(wù)器的功能。上傳文件是用Form表單提交數(shù)據(jù)的方法向后臺傳輸文件流,在此遇到了一個問題:后臺在處理完圖片上傳功能后,需要向前臺回傳是否上傳成功的狀態(tài)碼、上傳失敗的錯誤信息和上傳成功后的圖片URL。但是,用普通Form表單提交的話,沒有辦法實現(xiàn)回調(diào)函數(shù)。后來在小伙伴的介紹下,發(fā)現(xiàn)可以用ajaxSubmit()方法來實現(xiàn)此功能。

2.      ajaxSubmit()方法簡介

(1)ajaxSubmit()依賴

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

(2)ajaxSubmit()用法簡介

ajaxSubmit()方法接受0個或者1個參數(shù),當(dāng)為單個參數(shù)時,該參數(shù)既可以是一個回調(diào)函數(shù),也可以是一個options對象?;卣{(diào)函數(shù)比較簡單,下面主要介紹一下options的用法。options對象可以設(shè)置的參數(shù)如下:

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

這些參數(shù)里,比較常用的就是提交前的回調(diào)函數(shù)beforeSubmit和提交后的回調(diào)函數(shù)success。beforeSubmit主要是用來提交表單前,校驗數(shù)據(jù)的。示例代碼:

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

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

success是提交后的回調(diào)函數(shù),有4個參數(shù)responseText,statusText,xhr,和$form。其中,比較常用的是前兩個。statusText只是一個返回狀態(tài),例如success,error等。responseText攜帶著服務(wù)器返回的數(shù)據(jù)內(nèi)容,它會根據(jù)設(shè)置的options對象中的dataType屬性來返回相應(yīng)格式的內(nèi)容。

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(); 
} 
/** 
 * 保存后,執(zhí)行回調(diào) 
 * @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); 
  }   
} 

總結(jié)

以上所述是小編給大家介紹的利用AjaxSubmit()方法實現(xiàn)Form提交表單后回調(diào)功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

最新評論