Question

请考虑以下设置：

PageA.html - AJAX是否调用PageB.html
PageB.html - 多个ajax是否会调用多个页面。
在所有ajax调用结束时，PageA.html将刷新自身以更新为新内容。

我的代码：

// PageA.html
<script>
        $(document).ready(function () {
            $("#callAjax").click(function () {
                $(".loading").show();
                $.ajax({
                    type: "GET",
                    url: "PageB.html"
                  }).done(function() {
                      $(".loading").hide();
                });
            });
        });
</script>

// PageB.html
<script type="text/javascript">
        $(document).ready(function() {
            var urls = [
                "url1.php",
                            "url2.php",
                             :
                             :
            ];
            for (var i = 0; i < urls.length; i++) {
                $.ajax({
                    type: "GET",
                    url: urls[i]
                  });
            }
                    window.location = "{{ URL::to('/') }}";
        });
</script>

此设置的结果发生，没有更新，刷新劫持所有其他功能。我想这是因为PageB.html中的AJAX尚未完成。

我这样做是为了减少PHP的计算时间和性能。

有什么方法可以让它发挥作用吗？

更新：我发现刷新劫持我错了。没有刷新。没有更新。这只是PageA.html的AJAX调用。 PageB.html的AJAX调用未执行。

Answer 1

您可以尝试这种方式：

// PageA.html
<script>
    $(document).ready(function () {
       $("#callAjax").click(function () {
           $(".loading").show();
           $.ajax({
               type: "GET",
                url: "PageB.html"
           }).done(function() {
              $(".loading").hide();
              pageBajax();
           });
        });
     });
</script>

// PageB.html
<script type="text/javascript">
      function pageBajax() {
               var urls = [
                         "url1.php",
                         "url2.php",
                             :
                             :
                     ];
                for (var i = 0; i < urls.length; i++) {
                    $.ajax({
                          type: "GET",
                          url: urls[i]
                    });
                 }
              window.location = "{{ URL::to('/') }}";
        }
</script>

Answer 2

只是一些额外的信息：

Ajax回调

如果您在执行任何其他代码之前依赖运行Ajax调用，那么您应该查看Ajax Callbacks

虽然Ajax可以同步运行，但这实际上冻结了浏览器，导致各种问题。解决这个问题的方法是围绕Ajax调用来处理代码，而不是相反。

我写这篇文章的原因是因为我们遇到了一个问题，我们必须依赖Ajax响应才能加载模态表单。问题是我们不想同步执行它，并且考虑到Ajax (Asynchronous Javascript And XML)默认是异步的，我们必须以另一种方式使它工作：

    #PageA.html
    $(document).ready(function () {
        $("#callAjax").click(function () {
            $(".loading").show();
            fetch_data(function(data){
              //success
            }, function(data){
             //error
            }, function(data) {
             $(".loading").hide();
            });
        });
    });

    function fetch_data(success, error, done) {
        $.ajax({
           type: "GET",
           url: "PageB.html"
           success: function(data) { success(data); },
           error: function(data)   { error(data); }
        });
    };

您的代码

回调内容肯定适用于PageA，所以我想重要的是让PageB成功。也许这可行：

 #PageA.html
    $(document).ready(function () {
        $("#callAjax").click(function () {
            $(".loading").show();
            fetch_data(function(data){
              //success
            }, function(data){
             //error
            }, function(data) {
             $(".loading").hide();
            });
        });
    });

    function fetch_data(success, error, done) {
        $.ajax({
           type: "GET",
           url: "PageB.html"
           success: function(data) { success(data); },
           error: function(data)   { error(data); }
        });
    };

 #PageB.html
 $(document).ready(function() {
        var urls = [
            "url1.php",
                        "url2.php",
                         :
                         :
        ];
        for (var i = 0; i < urls.length; i++) {
            fetch_data(urls[i] function(data) {
                //success
            }, function(data) {
                //error
            });
        }
                window.location = "{{ URL::to('/') }}";
    });

  function fetch_data(url, success, error) {
       $.ajax({
           type: "GET",
           url: url,
           success: function(data) { success(data) },
           error: function(data)   { error(data) }
       });
  }

这可能是超级内存密集型的，但这是我开始的原因。我怀疑PageB的东西是开箱即用的，但希望回调的想法会有所帮助

Answer 3

您可能想了解

$.ajaxStart()（http://api.jquery.com/ajaxStart/）

$.ajaxStop()（http://api.jquery.com/ajaxStop/）。

它应该让您了解有关ajax请求的更多信息。

您可以启动所有ajax调用，然后等待ajaxStop()知道您的所有请求是否已结束并执行window.location = "{{ URL::to('/') }}";

希望它有所帮助。

修改

您应该将pageB的js放入pageA，否则它将不会被执行

// PageA.html <script> function doPageB() { var urls = [ "url1.php", "url2.php", : : ]; for (var i = 0; i < urls.length; i++) { $.ajax({ type: "GET", url: urls[i] }); } window.location = "{{ URL::to('/') }}"; }); } $(document).ready(function () { $("#callAjax").click(function () { $(".loading").show(); $.ajax({ type: "GET", url: "PageB.html" }).done(function() { $(".loading").hide(); doPageB(); }); }); }); </script>

Ajax加载的内容中不应包含javascript。 Javascript仅在窗口加载时解释，而不是在ajax调用上解释。

因此，您需要将pageB的javascript放入主页面，并在加载pageB时调用它（请参阅编辑的代码示例）。

此外，您的ajax调用是异步的，因此即使ajax尚未完成，javascript代码也将继续执行，并且在您的情况下，在ajax调用结束之前重新加载页面。

处理此问题的两个选项：使ajax调用同步，或使用ajaxStop知道每个ajax调用何时结束，然后使用window.location = url重新加载页面。

我认为你要做的事情是无用的：

您加载页面，使用ajax加载更多内容，然后重新加载页面。所以你所做的ajax将被取消。

我认为您需要了解更多有关ajax的信息，请注意错误

Answer 4

必须通过同步方式处理此方案。您的refresh()代码不知道ajax是否已完成，因为您异步打开请求。这将立即返回，你永远不知道什么时候会返回所有的ajax请求。它们就像线程一样，你的refresh（）页面代码也会像线程一样。如果你不同步调用这些方法，它们就不会遵循命令。

对此的一个解决方案是在每个ajax调用的返回（回调）时增加一个计数器，如果任何回调发现你的计数器是你的（ajax）方法的数量，那么刷新页面。（window.location = "{{ URL::to('/') }}";）。

其他解决方案，我认为是使用同步调用。

AJAX系列调用

4 个答案: