我可以使用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'); 
     } 
    }); 
}; 

你也必须处理错误的情况，但是这已经足够让你开始