Question

我使用jquery ajax函数调用php代码，但是我想在发送请求时显示一个加载器div，并在完成请求后隐藏div。为了测试目的，我只需要使用 sleep执行php执行5秒5）方法，显示我应该可以看到这个加载器。它对我不起作用我尝试了以下代码

首先尝试

show_loader();
   $.ajax(
    {
      async: false,
      url: "bindanswerposts.php",
      data: "sessuserid="+sessuserid+"&postid=" + _ViewPostid + "&xcode=" + $("body").data("xcode"),
      type: "POST",

      success: function(resp)
      {
        hideloader();
      },
      error: function(e)
      {        
        hideloader();
      }
    });

第二次尝试

$(document).ajaxStart(function(){
    showloader();
});

$(document).ajaxComplete(function(){
    hideloader();
});  

       $.ajax(
        {
          async: false,
          url: "bindanswerposts.php",
          data: "sessuserid="+sessuserid+"&postid=" + _ViewPostid + "&xcode=" + $("body").data("xcode"),
          type: "POST",

          success: function(resp)
          {

          },
          error: function(e)
          {        

          }
        });

第三次尝试

           $.ajax(
            {
              async: false,
              url: "bindanswerposts.php",
              data: "sessuserid="+sessuserid+"&postid=" + _ViewPostid + "&xcode=" + $("body").data("xcode"),
              type: "POST",
               beforeSend: function() {
       showloader();
      },
      complete: function() {
       hidloader();
  },
              success: function(resp)
              {

              },
              error: function(e)
              {        

              }
            });

但是上面的每一种方法都没有用，请帮助我。但在正常的javascript ajaxRequest 工作正常。

 ajaxRequest.onreadystatechange = function()
 {
   if(ajaxRequest.readyState == 1)
   {
      showloader();
   }

   if(ajaxRequest.readyState == 4)
   {
      hideloader();
   }
 }

Answer 1

尝试使用ajax的complete方法。

确保您在DOME中loader。

<div id="loading" style="display: none"><img src="loading.gif"></div>

Ajax调用

//Show loader here
$( "#loading" ).show();
$.ajax({
       //async: false,
       url: "bindanswerposts.php",
       data: "sessuserid="+sessuserid+"&postid=" + _ViewPostid + "&xcode=" + $("body").data("xcode"),
       type: "POST",
       success: function(resp)
       {

       },
       error: function(e)
       {        

       },
       complete:function()
       {
          //Hide the loader over here
          $('#loading').hide();
       }
});

编辑删除async=false，它应该有效。

对于同步ajax调用，它不会。 Ajax首先被执行，所有其他进程被阻塞/排队。

Answer 2

尝试这个它可能适合你首先创建一个加载器gif图像，其中ypu想要显示加载器默认的css属性为display：none;

<img src="loader.gif" class="loader" style="display:none;">

然后显示你的ajax像这样执行的时间

$(".loader").show();
$.ajax(
{
  async: false,
  url: "bindanswerposts.php",
  data: "sessuserid="+sessuserid+"&postid=" + _ViewPostid + "&xcode=" + $("body").data("xcode"),
  type: "POST",

  success: function(resp)
  {
     $(".loader").hide();
  },
  error: function(e)
  {        
    $(".loader").hide();
  }
});

jQuery ajax不显示并隐藏加载器div

2 个答案: