jQuery ajax 不显示和隐藏加载器 div答案

【问题标题】：jQuery ajax not show and hide the loader divjQuery ajax 不显示和隐藏加载器 div
【发布时间】：2016-09-26 01:41:05
【问题描述】：

我正在使用 jquery ajax 函数调用 php 代码，但我想在发送请求时显示加载器 div，并在完成请求后隐藏 div。出于测试目的，我使用 sleep( 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();
   }
 }

【问题讨论】：

你能发布 showloader 和 hideloader 函数吗？

标签： javascript php jquery ajax

【解决方案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，所有其他进程都被阻塞/排队。

【讨论】：

您面临的问题是什么？控制台中的任何错误？
没有错误，如果我使用调试器它工作正常。但不使用调试器就无法工作。
尝试将代码放入 $(document).ready(function(){ });并删除 async false 来检查它，如果它仍然有问题，只需创建 jsfiddle 来检查确切的问题和您的代码。
非常感谢，当我删除 async:false 时它工作得很好。请更新你的答案，我会勾选你的答案并投票。

【解决方案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();
  }
});

【讨论】：