jq ajax之beforesend(XHR)

 

用於在向服務器發送請求前添加一些處理函數。例如：搜尋附近店鋪，未搜尋出來的時候顯示：正在搜尋中...

常見的一種效果，在用ajax請求時，沒有返回前會出現前出現一個轉動的loading小圖標或者「內容加載中..」，用來告知用戶正在請求數據。這個就能夠用beforeSend方法來實現。

 

代碼以下:

function test_ajax(){
   $.ajax(
   {
      type:"GET",//一般會用到兩種：GET,POST。默認是：GET
      url:"a.php",//(默認: 當前頁地址) 發送請求的地址
      dataType:"html",//預期服務器返回的數據類型。
      beforeSend:beforeSend, //發送請求
      success:callback, //請求成功
      error:error,//請求出錯 
      complete:complete//請求完成
   });
}
function error(XMLHttpRequest, textStatus, errorThrown){
  // 一般狀況下textStatus和errorThown只有其中一個有值 
  $("#showResult").append("<div>請求出錯啦！</div>");
}
function beforeSend(XMLHttpRequest){
  $("#showResult").append("<div><img src='loading.gif' /><div>");
}
function complete(XMLHttpRequest, textStatus){
  $("#showResult").remove();
}
function callback(msg){
  $("#showResult").append("<div>請求成功，回傳數:"+msg+"<div>");
}

 

防止重複數據
在實際項目開發中，提交表單時經常因爲網絡或者其緣由，用戶點擊提交按鈕誤認爲本身沒有操做成功，進而會重複提交按鈕操做次數，若是頁面前端代碼沒有作一些相應的處理，一般會致使多條一樣的數據插入數據庫，致使髒數據的增長。要避免這種現象，在$.ajax請求中的beforeSend方法中把提交按鈕禁用掉，等到Ajax請求執行完畢，在恢復按鈕的可用狀態。

舉個例子：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

// 提交表單數據到後臺處理 $.ajax({    type: "post" ,    data: studentInfo,    contentType: "application/json" ,    url: "/Home/Submit" ,    beforeSend: function () {      // 禁用按鈕防止重複提交      $( "#submit" ).attr({ disabled: "disabled" });    },    success: function (data) {      if (data == "Success" ) {        //清空輸入框        clearBox();      }    },    complete: function () {      $( "#submit" ).removeAttr( "disabled" );    },    error: function (data) {      console.info( "error: " + data.responseText);    } });

模擬Toast效果
ajax請求服務器加載數據列表時提示loading(「加載中，請稍後...」),

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

$.ajax({    type: "post" ,    contentType: "application/json" ,    url: "/Home/GetList" ,    beforeSend: function () {      $( "loading" ).show();    },    success: function (data) {      if (data == "Success" ) {        // ...      }    },    complete: function () {      $( "loading" ).hide();    },    error: function (data) {      console.info( "error: " + data.responseText);    } });

 

方法beforeSend，用於在向服務器發送請求前添加一些處理函數。這是一個ajax事件，在ajax請求開始以前就被觸發，一般容許用戶修改XMLHttpRequest對象（好比說設置附加的頭部信息），關於ajax事件的解釋可參考文檔：http://docs.jquery.com/Ajax_Events

咱們還見到一種狀況，不少網站在加載內容的過程當中給出「數據加載中，請稍候」的提示，當內容被加載完畢後顯示內容。能夠設置默認文本顯示爲加載中的提示，當內容加載完畢時，咱們能夠經過ID選擇器，將該標籤中的文本替換成最終的內容。以此來取代beforeSend，效率更高。

何時用beforeSend，何時用文本替換，取決於ajax請求先後你所展現的DOM元素是否一致，若是你所展現的DOM元素在請求以前已經存在，那麼經過上述文本替換的方式來處理會好些，若是除此之外你還需增長其餘的需求，那麼仍是用beforeSend來處理吧。