Question

我真的很喜欢ajax，并且想知道是否有办法避免在下面使用setTimeout。我需要从两个url＆＃（/ blog和/ blog / all）创建两个变量。然后我需要在一个单独的函数中一起使用这些变量。我的（有缺陷的）计划是进行两次ajax调用并将结果传递给空div，然后根据这些div的内容设置新变量以运行我的函数。它有效，但我必须使用setTimeout，这显然不是理想的。有没有办法将一个ajax调用嵌入另一个？我试过但没有运气。这就是我所拥有的：

$(document).ready(function(){
    $.ajax({
        url : "/blog/all",
        success : function (data) {
            var totalPosts = $(data).find('.post-item').length
            console.log("totalPosts: " + totalPosts);
            $('.totalPosts').text(totalPosts);
        }
    });

    $.ajax({
        url : "/blog",
        success : function (data) {
            var pagePosts = $(data).find('.post-item').length
            console.log("pagePosts: " + pagePosts);
            $('.pagePosts').text(pagePosts);
        }
    });

    setTimeout(function(){  

        var tPosts = $('.totalPosts').text();
        var pPosts = $('.pagePosts').text();
        console.log("tPosts: " + tPosts);
        console.log("pPosts: " + pPosts);
    }, 3000);
});

Answer 1

您可以使用$.when在所有AJAX调用完成后执行操作。

$(document).ready(function(){
    var promise1 = $.ajax({
        url : "/blog/all",
        success : function (data) {
            var totalPosts = $(data).find('.post-item').length
            console.log("totalPosts: " + totalPosts);
            $('.totalPosts').text(totalPosts);
        }
    });

    var promise2 = $.ajax({
        url : "/blog",
        success : function (data) {
            var pagePosts = $(data).find('.post-item').length
            console.log("pagePosts: " + pagePosts);
            $('.pagePosts').text(pagePosts);
        }
    });

    $.when(promise1, promise2).then(function(){  
        var tPosts = $('.totalPosts').text();
        var pPosts = $('.pagePosts').text();
        console.log("tPosts: " + tPosts);
        console.log("pPosts: " + pPosts);
    });
});

Answer 2

我会做这样的事情：

$(document).ready(function(){
    $.ajax({
        url : "/blog/all",
        success : function (data1) {
            var totalPosts = $(data1).find('.post-item').length
            console.log("totalPosts: " + totalPosts);
            $('.totalPosts').text(totalPosts);
            $.ajax({
               url : "/blog",
               success : function (data2) {
                  var pagePosts = $(data2).find('.post-item').length
                  console.log("pagePosts: " + pagePosts);
                  $('.pagePosts').text(pagePosts);

                  // Here goes the code that was in timeout
                  var tPosts = $('.totalPosts').text();
                  var pPosts = $('.pagePosts').text();
                  console.log("tPosts: " + tPosts);
                  console.log("pPosts: " + pPosts);
               }
            });
         }
    });
});

Answer 3

通过使用成功和错误回调，您可以保证数据的可用性，而不依赖于超时。

如果一个呼叫取决于另一个，为什么不使用内置回调？这是一些伪代码来说明

var allBlogItems = null;
var getAll = function(){
  $.ajax {
    url : "/blog/all",
    success: function(data){
       allBlogItems = data;
       getBlogThenSetHTML();
     }
    }
  }
 };
 var blogData = null; 
 var getBlogThenSetHTML = function(){
   $.ajax {
    url : "/blog/all",
    success: function(data){
       blogData = data;
       doSomething();
     }
    }
  }
 };

 var doSomething = function(){
   console.log(blogData);
   console.log(allBlogData);
 };

这当然是一个快速而肮脏的例子。您可以按顺序执行呼叫，并在完成两次呼叫后使用结果数据。

将数据对象封装在函数中也有助于提高可重用性和可读性。在ajax调用中嵌套ajax调用是很可怕的。

Ajax从多个url设置变量

3 个答案: