【问题标题】:Handling Multiple AJAX calls处理多个 AJAX 调用
【发布时间】:2015-02-01 07:52:38
【问题描述】:

我有以下代码使用 AJAX 从几个不同的 URL 中提取 JSON 数据,我想将它们存储到单独的数组中。这是一个示例:

var var1 = $.ajax({
    url: FEED1,
    dataType: 'jsonp',
    crossDomain: true,
    success: function (data) {
        if (data) {
            ItemAry1 = data.posts;
        }
    }
});
var var2 = $.ajax({
    url: FEED2,
    dataType: 'jsonp',
    crossDomain: true,
    success: function (data) {
        if (data) {
            ItemAry2 = data.posts;
        }
    }
});

在我的代码中,我有几个。每个数组具有相同的确切数据的问题。甚至 FEED1 和 FEED2 都是不同数据的 url。

【问题讨论】:

    标签: jquery ajax promise


    【解决方案1】:

    做一个函数!

    var serviceURL = "http://www.example.com";
    var itemArrays = {};
    
    function getFeed(category_id){
    
        return $.ajax({
            url: serviceURL,
            data: {
                "json":"get_category_post",
                "category_id":category_id,
                "count": 25
            },
            dataType: 'jsonp',
            crossDomain: true,
            success: function (data) {
                if (data) {
                    itemArrays[i] = data.posts;
                }
            }
        });
    }
    
    var feedPromises = [];
    for (var i = 0, count = 9; i < count; i++){
        //start the process to get all the feeds and save their ajax promises into an array
        feedPromises.push(getFeed(i));
    }
    
    // wait until all the feeds return data to continue
    $.when.apply(this, feedPromises)
        .done(function(){
            // when all the data calls are successful you can access the data via
            itemArrays[0];
            itemArrays[1];
            console.log(itemArrays);
        });
    

    【讨论】:

    • 我仍然得到相同的结果。
    • 你得到了什么结果,你期待什么结果?
    • 每个数组的所有结果都相同。每个数组都应该得到不同的数据,因为我每次调用都使用不同的 URL。
    • 网址是 json 查询。所以一个是 www.example.com/?json=get_category_post&category_id=2&count=25 另一个是 ?json=get_category_post&category_id=3&count=25 并且 id 一直变化到 9。当我将每个 url 放入浏览器时,它们都提取不同的数据(这是我想要的)。我希望将每组数据存储在不同的数组中。
    • 我更新了代码,现在这会将每条数据保存在不同的数组中,(在一个主数组中)。
    【解决方案2】:

    感谢@Patrick Gunderson,这是我最终使用的:

    function get_articles(category_id) {
            console.log('running ' + category_id);
    
            var url_addition = "?json=get_category_posts&category_id=" + (category_id + 1);
            var url_count = "&count=25";
            var serviceURL = "http://www.example.com/" + url_addition + url_count;
    
            console.log(serviceURL);
    
            return $.ajax({
                url: serviceURL,
                dataType: 'jsonp',
                crossDomain: true,
                success: function (data) {
                    if (data) {
                        itemArrays[category_id] = data.posts;
                    }
                    else{
                        console.log("Failed category_id: "+ category_id);
                    }
                }
            });
        }
    
        var feedPromises = [];
        for (var i = 0, count = 10; i < count; i++) {
            //start the process to get all the feeds and save their ajax promises into an array
            feedPromises.push(get_articles(i));
        }
        $.when.apply(this, feedPromises)
            .done(function () {
                // when all the data calls are successful you can access the data via
                console.log(itemArrays);
            });
    
        console.log(feedPromises);
    

    【讨论】:

    • 您可以使用$.ajax() data 参数来设置您的参数,jQuery 将为您构建(并附加)查询字符串到服务 url,您不需要构建整个像你正在做的那样明确的网址。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-03-11
    • 2019-01-15
    • 2015-06-13
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多