1

我正在尝试使用 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");

基本上，如果满足某些条件，那么我将立即添加内容，否则我想将其添加到内容的末尾以及所有其他“已保存”的内容。

我正在尝试做的事情可能吗？如果是这样，怎么做？

4

3 回答 3

5

新答案：

我会以不同的方式处理这个问题。而不是 using async: false，这通常是不受欢迎的（它甚至在最新版本的 jQuery 中被弃用），我会用它$.when来实现相同的效果。

// 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");
});

原答案：

问题$.ajax是异步的。尝试替换此行：

html += "<div>" + item.data + "</div>";

有了这个：

$("<div>" + item.data + "</div>").appendTo("#content");
于 2013-06-19T02:18:37.490 回答
0

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

您尝试在两个地方将此内容附加到页面。首先是第 10 行：

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

假设您按照自己的喜好编写条件，那应该可以正常工作。第二个地方是最后一行：

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

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

我对如何解决此问题的答案取决于第 9 行中检查的条件类型。如果可以通过事件侦听器检测到它，我将重写success以将结果存储在全局html变量中，然后编写第二个事件侦听器满足您的条件时触发，将 的内容附加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");

如果您希望能够在完成加载后强制它附加fake3.com，请使用闭包执行以下操作：

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

loadByUrl("http://fake1.com",false);
loadByUrl("http://fake2.com",false);
loadByUrl("http://fake3.com",true); // true => force appension.
于 2013-06-19T02:50:17.087 回答
0

如果它不是 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 对象实现了 Promise 模式。您可以在http://api.jquery.com/jQuery.ajax/查看文档

于 2013-06-19T03:44:02.483 回答