Ajax 从多个 url 中设置变量

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

我会这样做：

$(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 2

当所有 AJAX 调用完成后，您可以使用 $.when 采取行动。

$(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 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 中设置变量

Ajax set variable from multiple url

ajax

jquery