Javascript jquery从多个ajax调用收集数据

我试图使用jquery和ajax从几个url收集数据，然后从中创建内容。然而，我肯定错过了一些东西，因为它似乎不起作用

我有这样的想法：

var html = "";
function loadByUrl(url) {
    $.ajax({
        url: url, 
        dataType: 'json',
        async: false,
        success: function(json) {
          $.each(json.data.children, function(i,item){
            if( someCondition ) {
                $(item.data).appendTo("#content");
            } else {
                html += "<div>" + item.data + "</div>"; 
            }
          }
        }
    });
}

loadByUrl("http://fake1.com");
loadByUrl("http://fake2.com");
loadByUrl("http://fake3.com");
$(html).appendTo("#content");

var html=”“；
函数loadByUrl（url）{
$.ajax({
url:url，
数据类型：“json”，
async:false，
成功：函数（json）{
$.each（json.data.children，函数（i，项）{
如果（某些条件）{
$（item.data）。附加到（“#content”）；
}否则{
html+=“”+item.data+“”；
}
}
}
});
}
loadByUrl（“http://fake1.com");
loadByUrl（“http://fake2.com");
loadByUrl（“http://fake3.com");
$（html）。附加到（“#内容”）；

基本上，如果满足某些条件，我会立即添加内容，否则我会将其添加到内容末尾，并添加所有其他“已保存”内容

我想做的事情可能吗？如果可能，怎么做？

新答案：

我将以不同的方式处理这个问题。我将使用

async:false

，而不是通常不受欢迎的

async:false（在最新版本的jQuery中甚至不推荐使用它），我将使用
$。当
达到同样的效果时

// return a promise
function loadByUrl(url) {
    return $.ajax({
        url: url, 
        dataType: 'json'
    });
}

// handle processing the data in a separate function
function processData(data) {
    var result = '';
    $.each(data.children, function(i,item){
        if( someCondition ) {
             $(item.data).appendTo("#content");
        } else {
            result += "<div>" + item.data + "</div>"; 
        }
    }
    return result;
}

// use when to ensure all of the AJAX requests execute before
// doing anything with their results
$.when(loadByUrl("http://fake1.com"), loadByUrl("http://fake2.com"), loadByUrl("http://fake3.com")).done(function(fake1, fake2, fake3) {
    // this function is called after all three AJAX promises are resolved
    var html = '';

    html += processData(fake1[0]);
    html += processData(fake2[0]);
    html += processData(fake3[0]);

    $(html).appendTo("#content");
});

为此：

$("<div>" + item.data + "</div>").appendTo("#content");

$（“+item.data+”）.appendTo（“#content”）；
新答案：

我将以不同的方式处理这个问题。我将使用
async:false
，而不是通常不受欢迎的
async:false（在最新版本的jQuery中甚至不推荐使用它），我将使用
$。当
达到同样的效果时

// return a promise
function loadByUrl(url) {
    return $.ajax({
        url: url, 
        dataType: 'json'
    });
}

// handle processing the data in a separate function
function processData(data) {
    var result = '';
    $.each(data.children, function(i,item){
        if( someCondition ) {
             $(item.data).appendTo("#content");
        } else {
            result += "<div>" + item.data + "</div>"; 
        }
    }
    return result;
}

// use when to ensure all of the AJAX requests execute before
// doing anything with their results
$.when(loadByUrl("http://fake1.com"), loadByUrl("http://fake2.com"), loadByUrl("http://fake3.com")).done(function(fake1, fake2, fake3) {
    // this function is called after all three AJAX promises are resolved
    var html = '';

    html += processData(fake1[0]);
    html += processData(fake2[0]);
    html += processData(fake3[0]);

    $(html).appendTo("#content");
});

为此：

$("<div>" + item.data + "</div>").appendTo("#content");

$（“+item.data+”）.appendTo（“#content”）；
编辑：我刚刚看到这些是同步请求。如果你想坚持同步请求，我想你想签出。我从未使用过同步选项，但我很确定你没有指定回调函数。如果你不介意切换到异步，我想我答案底部的代码仍然可以工作。

您尝试在两个位置将此内容附加到页面。首先，第10行：

$(item.data).appendTo("#content");

假设你按照自己喜欢的方式写下你的病情，那应该可以。第二位是最后一行：

$(html).appendTo("#content");

这将在加载内容之前触发，并在文档中附加一个空白html字符串。诀窍在于理解AJAX请求和第二个appension会立即执行，但是将结果加载到变量
html
中的
success
函数在服务器发回请求后才会触发信息

我对如何解决这个问题的回答取决于第9行中检查的是什么类型的条件。如果它是通过事件侦听器检测到的，我将重写
success
，除了将结果存储在全局
html
变量中之外，什么都不做，然后编写第二个事件侦听器，在满足条件时触发，并附加c将
html
的内容发送到目标，然后清除它。但是，如果事件侦听器无法检测到该情况，我会将您的代码更改为以下内容：

var html = "";
function loadByUrl(url) {
    $.ajax({
        url: url, 
        dataType: 'json',
        success: function(json) {
            $.each(json.data.children, function(i,item){
                html += "<div>" + item.data + "</div>";
                if( someCondition ) {
                    $(html).appendTo("#content");
                }
            });
        });
}

loadByUrl("http://fake1.com");
loadByUrl("http://fake2.com");
loadByUrl("http://fake3.com");

编辑：我刚刚看到这些是同步请求。如果你想坚持使用同步请求，我想你想签出。我从未使用过同步选项，但我很确定你没有指定回调函数。如果你不介意切换到异步，我想我答案底部的代码仍然可以工作

您尝试在两个位置将此内容附加到页面。首先，第10行：

$(item.data).appendTo("#content");

假设你按照自己喜欢的方式写下你的病情，那应该可以。第二位是最后一行：

$(html).appendTo("#content");

这将在加载内容之前触发，并在文档中附加一个空白html字符串。诀窍在于理解AJAX请求和第二个appension会立即执行，但是将结果加载到变量
html
中的
success
函数在服务器发回请求后才会触发信息

我对如何解决这个问题的回答取决于第9行中检查的是什么类型的条件。如果它是通过事件侦听器检测到的，我将重写
success
，除了将结果存储在全局
html
变量中之外，什么都不做，然后编写第二个事件侦听器，在满足条件时触发，并附加c将
html
的内容发送到目标，然后清除它。但是，如果事件侦听器无法检测到该情况，我会将您的代码更改为以下内容：

var html = "";
function loadByUrl(url) {
    $.ajax({
        url: url, 
        dataType: 'json',
        success: function(json) {
            $.each(json.data.children, function(i,item){
                html += "<div>" + item.data + "</div>";
                if( someCondition ) {
                    $(html).appendTo("#content");
                }
            });
        });
}

loadByUrl("http://fake1.com");
loadByUrl("http://fake2.com");
loadByUrl("http://fake3.com");

如果它不是Nir指出的跨域调用，请尝试在ajax调用中使用“.done”，并在回调函数中进行追加

比如

$.ajax({
   your call setup and call
}).done(function(data) {
   console.log('Data:',data);  
   //your code to append the data 
}

这可以通过“.done”实现，因为从jQuery 1.5开始，$.ajax（）返回的jqXHR对象实现了承诺模式。您可以查看位于
的文档，如果它不是Nir指出的跨域调用，请尝试在ajax调用中使用“.done”，并在回调函数中进行追加

比如

$.ajax({
   your call setup and call
}).done(function(data) {
   console.log('Data:',data);  
   //your code to append the data 
}

这可以通过“.done”实现，因为从jQuery 1.5开始，$.ajax（）返回的jqXHR对象实现了承诺模式。您可以在
$（数据）中查看什么是
数据
。附录（“#内容”）
？我已经修复了它，应该是'item.data'，如果预期的结果出现了什么情况？异常？错误的内容？您在firebug或chrome开发控制台中看到了什么？我已经放入了一个console.debug，我可以看到html变量在增长，但似乎html追加调用首先发生，此时变量仍然为空。请参阅我更新的答案f或者用不同的方法来实现同样的事情。
$（数据）中的
数据是什么。附加到（#内容）；
？我已经修复了它，应该是'item.data'如果预期结果是什么？异常？错误的内容？什么