jquery ajaxStart/ajaxStop not working

本文关键字：not working ajaxStop ajaxStart jquery 更新时间：2023-09-26

我有非常简单的代码，我通过jquery做部分回发，我使用ajaxStart/ajaxStop做一些工作。但这并没有奏效。我只是不明白为什么它不工作。这是我的代码

$("#imgHolder").ajaxStart(function () {
 $('div#content').block({
          message: '<table><tr><td><img  src="../images/ajax-loader.gif" border="0"/></td><td><h3>Processing...</h3></td></tr><table>',
        css: { border: '1px solid #a00' }
        });
    $('#imgHolder').empty();
    $("#btnPrint").hide();
    });
  $("#imgHolder").ajaxStop(function () {
  $("#btnPrint").show();
  $('div#content').unblock();
 });  

$(document).ready(function () {
 $.ajax({
  type: "POST",
  url: "UPSLabelFormUK.aspx/ProcessInfo",
  data: JSON.stringify(DTO),
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function (data) {
  if (data.d[0].Message == "SUCCESS") {
  //alert(data.d[0].TrackNumber);
  ///alert(data.d[0].LabelImagePath);
  var _images = [data.d[0].LabelImagePath];
  $.each(_images, function (e) {
    $(new Image()).load(function () {
    $('#imgHolder').html("<img src='" + data.d[0].LabelImagePath + "' width='310' height='402' border=0/>");
  }).attr('src', this);
 });
}
 } ,
  error: function (XMLHttpRequest, textStatus, errorThrown) {
  alert(textStatus);
  }
 });
 });

我只是不明白为什么我上面的ajaxstart/ajaxstop不工作。请帮助我理解为什么我的代码是错误的。

但是我的ajaxstart/ajaxstop开始工作当我改变代码有点像

        $(document).ajaxStart(function () {
            $('div#content').block({
                message: '<table><tr><td><img  src="../images/ajax-loader.gif" border="0"/></td><td><h3>Processing...</h3></td></tr><table>',
                css: { border: '1px solid #a00' }
            });
            $('#imgHolder').empty();
            $("#btnPrint").hide();
        });

        $(document).ajaxStop(function () {
            $("#btnPrint").show();
            $('div#content').unblock();
        });

唯一的变化是$(document).ajaxStop(function () {取代了

$("#imgHolder").ajaxStart(function () {

所以请解释为什么我上面的ajaxStart/ajaxStop代码不工作。由于

给定的事实，ajaxStart只在没有其他调用Ajax请求正在进行中，如果您想使用它，它将毫无用处作为AJAX加载器指示器。

你试过了吗(告诉我它是否有效)

jQuery(document).ajaxStart(function(){
alert("it begins");
})

从jQuery 1.8开始，. ajaxstop()方法只能附加到document.

从jquery api网页的"ajaxStop"。点击这里查看

试试这个:

$("#loading").bind({
   ajaxStart: function() { $(this).show(); },
   ajaxStop: function() { $(this).hide(); }
});

本质上是将loadingAnimationElement绑定到全局触发的ajaxStart和ajaxStop事件。只有当你想让它出现的时候，它才会出现。

当jQuery没有执行任何Ajax请求而一个新的请求被启动时，它触发一个ajaxStart事件。如果其他请求在第一个请求结束之前开始，这些新请求不会引起新的ajaxStart事件。当最后一个等待的Ajax请求完成并且jQuery不再执行任何网络活动时，ajaxStop事件被触发。

这个组合工作得很好。感谢用户@brroshan

JS的主页

<script language="JavaScript" type="text/javascript">
$(document).ajaxStart(function () {
     $("#loading").show();
});
$(function () {
// Some other code
// The end of this code block
$("#loading").hide();
$("#loading").bind({
         ajaxStart: function () { $(this).show(); },
         ajaxStop: function () { $(this).hide(); }
     });
});
</script>

母版页的html

<div id="loading" class="display: none;">
    <h2>Loading...</h2>
</div>

试试这个示例代码:-

 var $loading = $('#div_Loader').hide();
    $(document).ajaxStart(function () {  
         $loading.show();
    })
    .ajaxStop(function () {
        setTimeout(function () {                 
            $loading.hide();
        }, 1000);                                  
    });