我可以使用jQuery來顯示我的Ajax查詢正在進行嗎？

Question

我使用下面的JavaScript，當一個字段被更改檢測：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("select[id^='Status_'], input[id^='Position_']").change(function (e) { 
      var type = $(this).attr('id').split('_')[0]; 
      updateField('Account', $(this), type); 
     }); 
    }); 
</script> 

這然後調用數據庫中的以下內容UPDATA數據：

function updateField(entity, obj, type) { 
    var val = obj.val(); 
    var idArr = obj.attr("id"); 
    var idTmp = idArr.split("_"); 
    var id = idTmp[1]; 
    var pk = $('#Meta_PartitionKey').val(); 
    var rk = $("div[id='rk_" + id + "']").html(); 
    $.ajax({ 
     cache: false, 
     url: "/Administration/" + entity + "s/Update", 
     data: { 
      pk: pk, 
      rk: rk, 
      fld: type, 
      val: val 
     } 
    }); 
}; 

有沒有辦法，我可以提供一些方法向用戶發出更新正在進行的視覺線索。就像改變光標然後改回它一樣。

另外，如何向我的用戶發送消息以顯示更新是否失敗？

Answer 1

使用此：

function updateField(entity, obj, type) { 
    var val = obj.val(); 
    var idArr = obj.attr("id"); 
    var idTmp = idArr.split("_"); 
    var id = idTmp[1]; 
    var pk = $('#Meta_PartitionKey').val(); 
    var rk = $("div[id='rk_" + id + "']").html(); 
    enableLoadingIcon(); 
    $.ajax({ 
     cache: false, 
     url: "/Administration/" + entity + "s/Update", 
     data: { 
      pk: pk, 
      rk: rk, 
      fld: type, 
      val: val 
     }, 
     success: function() 
     { 
      disableLoadingIcon(); 
     } 
    }); 
}; 

，然後實現這兩個函數啓用加載和禁用加載顯示加載圖標或任何東西。

例如實現CSS樣式改變光標爲整身：

body.ajaxloading { 
    cursor:wait; 
} 

在這裏看到的例子：http://www.w3schools.com/cssref/pr_class_cursor.asp

，然後實現的功能是這樣的：

function enableLoadingIcon() { 
    $(body).addClass('ajaxloading'); 
} 
function disableLoadingIcon() { 
    $(body).addClass('ajaxloading'); 
} 

Answer 2

如果你想使用一些jQuery庫，那麼這會有所幫助：blockUI

Answer 3

UPDATEFIELD調用函數顯示一些圖像前（可以產生很好的在這裏http://www.ajaxload.info/）和成功後隱藏。

in $ .ajax您可以使用成功和錯誤。

Answer 4

打電話之前您$.ajax()顯示有加載動畫或消息的元素，並在$.ajax()添加成功處理程序：

$.ajax({ 
    ... 
    success: function() { 
     alert('done'); 
    } 
}); 

Answer 5

您可以將blockUI與ajax的回調函數結合使用。

function updateField(entity, obj, type) { 
$.blockUI(); 
var val = obj.val(); 
var idArr = obj.attr("id"); 
var idTmp = idArr.split("_"); 
var id = idTmp[1]; 
var pk = $('#Meta_PartitionKey').val(); 
var rk = $("div[id='rk_" + id + "']").html(); 
$.ajax({ 
    cache: false, 
    url: "/Administration/" + entity + "s/Update", 
    data: { 
     pk: pk, 
     rk: rk, 
     fld: type, 
     val: val 
    }, 
    success: function(){ 
     $.unblockUI(); 
    } 
}); 
}; 

Answer 6

function updateField(entity, obj, type) { 
    var val = obj.val(); 
    var idArr = obj.attr("id"); 
    var idTmp = idArr.split("_"); 
    var id = idTmp[1]; 
    var pk = $('#Meta_PartitionKey').val(); 
    var rk = $("div[id='rk_" + id + "']").html(); 
    $.ajax({ 
     cache: false, 
     url: "/Administration/" + entity + "s/Update", 
     data: { 
      pk: pk, 
      rk: rk, 
      fld: type, 
      val: val 
     }, 
     beforeSend: function(){ 
      alert('Starting ajax'); 
     } 
     success: function(response){ 
     alert('finished'); 
     } 
    }); 
}; 

你也必須處理錯誤的情況，但是這已經足夠讓你開始