Question

我有一个jQuery $ .ajax调用，适用于所有主流浏览器。

另外，我使用.ajaxStart和.ajaxStop函数来制作我页面上的一个看不见的div，上面写着“loading ...”，可见。

问题是，虽然ajaxStart和.ajaxStop都发生了事件没有任何问题（我从console.log（）检查），.show事件在Google Chrome中完全忽略了ajaxStart中的jQuery。

以下是代码：

$("#loadMsg").ajaxStart(function(){
   console.log('ajaxstart');
   // the next command is ignored ONLY in Google Chrome
   $(this).show(0);
}); 

$.ajax({
  url:"xxx.php",
  type:"POST",
  data:"id="+id,
  async:false,
  success:function(data)
  {
     console.log(data); 
  }
});  

$("#loadMsg").ajaxStop(function(){
  console.log('ajaxfinish');
  $(this).hide(0);
});

我已经尝试过：

$("#loadMsg").show(0);  
$("#loadMsg").fadeIn();  
$("#loadMsg").css("display","block");  
$("#loadMsg").css("display","inline");

等

任何建议都会非常感激。

Answer 1

您不能使用async：false执行此操作，这将导致浏览器挂起，直到请求完成。我没有尝试使用async：false，而是敦促您考虑重新处理项目，使其以异步方式工作。

Answer 2

经过2天的挣扎，我终于找到了解决方案。我上面发布的整个代码都在一个函数中，它通过success属性将xxx.php的结果返回给主代码。

问题在于，当我使用 async：true 选项时，函数立即返回返回值，而不等待ajax完成请求。因此，返回的值始终为“未定义”值，而不是xxx.php的正确结果。

运行ajax异步并且仅在完成ajax请求时继续执行其余代码的解决方案是将整个代码放在success参数中。

我将尝试通过以下示例说明：

不起作用的代码：

function foo()
{

 if call_ajax_request()=="true"
  {
    //execute code A
    // never had the chance to be executed because call_ajax_request() 
    // was always undefined
  }

}



function call_ajax_request()
{

  var return_value;

  $.ajax({
  url:"xxx.php",
  type:"POST",
  data:"z="+y,
  success:function(data)
    {
           return_value = data;
        }
    }); 

    //return_value was always "undefined" because the flow didn't wait
   // for ajax to complete (async mode)
   return return_value;
}

最终完成工作的代码：

function foo()
{

  $.ajax({
   url:"xxx.php",
   type:"POST",
   data:"z="+y,
   success:function(data)
     {
            return_value = data;

            //here, the following code won't be executed 
            //as long as ajax hasn't been completed.

            if (return_value=="true")
            {
               //execute code A
            }
         }
   }); 

}

ajaxStart忽略谷歌浏览器中的.show（）

2 个答案: