使用AJAX工作的JQuery加载程序:false

I'm a newcomer to the jquery planet and I have no idea how to solve my problem. I have read all the answers to similar questions but none of them work for me. I work on MAC OS X and therefore Safari with JQuery 2.1.1, but in the end my platform will be shared online and must be compatible with other browsers.

我是jquery星球的新手，我不知道如何解决我的问题。我读过类似问题的所有答案，但没有一个对我有用。我在MAC OS X上工作，因此在Safari上使用JQuery 2.1.1，但最终我的平台将在网上共享，并且必须与其他浏览器兼容。

PURPOSE: I would like to display a page containing my loading animation. however my JQuery function contains an ajax executable with async:false mode to be able to return the executed script's response. So I can't use the beforeSend and complete options. I tried to use a solution that I found on this post. Unfortunately my animation is not displayed

目的:我想显示一个包含我的加载动画的页面。但是，我的JQuery函数包含一个带有async:false模式的ajax可执行文件，可以返回执行的脚本的响应。所以我不能使用前面的和完整的选项。我试图使用我在这篇文章中找到的解决方案。不幸的是我的动画没有显示

HTML:

HTML:

<form id="myRun" method="post" action="" enctype="multipart/form-data">
    ... SOME ACTIONs ...
    <input class="demo" type="button" id="runner" value="Submit">
</form>
<div class="preloader" id="run_loader"><?php include('map/run_loader.php');?></div>

JS:

// Run platform
$('#runner').click(function() {
  $('#run_loader').show();
  setTimeout(function() {
      var results = function(){
        $.ajax({
          url : "php/runner.php",
          type: "post",
          global: false,
          async:false,
          data : $("#myRun").serializeArray(),
          success: function (response) {
            //alert(response);
            //window.location.href = response; *** DOESN'T WORK HERE ***
            $('#run_loader').hide();
            res = response;
          }
        });
        return res;
      }();
  }, 0);
  window.location.href = String(results);
});

QUESTION(s): Could you help me to run this loading page? Do you have any other comments about my code to improve myself?

问题:你能帮我运行这个加载页面吗?你对我的代码有什么其他的评论来提高我自己吗?

Thanks in advance

谢谢提前

1 个解决方案

#1

Your problem is entirely caused by the use of async: false. The reason is because this stops the browser UI from updating while the request is in progress, leading users to believe the browser has crashed or hung. As such, it's a very bad practice which should never be used unless there is absolutely no alternative. If you check the console you'll even see the browser warning you not to use synchronous calls.

您的问题完全是由使用async: false引起的。原因是，当请求正在进行时，这阻止了浏览器UI的更新，导致用户认为浏览器已经崩溃或挂起。就其本身而言，这是一种非常糟糕的做法，除非绝对没有其他选择，否则不应该使用这种做法。如果您检查控制台，您甚至会看到浏览器警告您不要使用同步调用。

The assertion in your comment that window.location.href doesn't work in the success handler is false, it will work fine. If it's not working for you then there is an error being returned from the server side code to your AJAX call which you need to investigate and debug.

在您的注释中对window.location的断言。href在成功处理程序中不工作是假的，它将正常工作。如果它不能为您工作，那么服务器端代码将返回到AJAX调用，您需要对该调用进行研究和调试。

To improve your JS logic you should use the async callback pattern more effectively, by performing all logic that depends on the result of the AJAX call within the success event handler. You also don't need the timeout either. Try this:

为了改进您的JS逻辑，您应该更有效地使用异步回调模式，方法是在success事件处理程序中执行所有依赖于AJAX调用结果的逻辑。你也不需要超时。试试这个:

$('#runner').click(function() {
  $('#run_loader').show();

  $.ajax({
    url: "php/runner.php",
    type: "post",
    data: $("#myRun").serializeArray(),
    success: function(response) {
      $('#run_loader').hide();
      window.location.assign(response);
    }
  });
});

#1

$('#runner').click(function() {
  $('#run_loader').show();

  $.ajax({
    url: "php/runner.php",
    type: "post",
    data: $("#myRun").serializeArray(),
    success: function(response) {
      $('#run_loader').hide();
      window.location.assign(response);
    }
  });
});

秒客网

使用AJAX工作的JQuery加载程序:false

1 个解决方案

#1

#1

相关文章