jQuery - 在 XML 加载事件中加载 json

Question

我有一个这样的 xml 文件

<users>
    <user>
        <name>LOREM</name>
        <pic>LOREM</pic>
        <post>www.URL.com/info.json</post>
    </user>
    <user>
        <name>LOREM</name>
        <pic>LOREM</pic>
        <post>www.URL.com/info.json</post>
    </user>
</users>

我用 jquery 解析这个 xml 所以：

var data = {};
$.get('xmlfile.xml', function(xml){
    var oXML = $(xml);

    oxml.find('user').each(function(i){
        data[i].name = $(this).attr('name');
        data[i].pic = $(this).attr('pic');
        data[i].post = /* i must load a json file with all posts here*/
    });

});

帖子位于外部 json 文件中。我试图像这样在加载 xml 时加载 json

var data = {};
$.get('xmlfile.xml', function(xml){
    var oXML = $(xml);

    oxml.find('user').each(function(i){
        data[i].name = $(this).attr('name');
        data[i].pic = $(this).attr('pic');
        data[i].post = $.getJSON($(this).attr('post'), function(data){
            retrun data;
        });
    });

});

但它不起作用。 data[i].post 的值为空。你有在加载 xml 时加载 json 的想法吗？

Answer 1

$.getJSON 是异步的，因为 AJAX 是异步的。您只能在 success 回调中访问 AJAX 调用的结果。在您的示例中，您试图将 $.getJSON 调用的返回值分配给 data[i].post 变量。但这不可能起作用，因为该值可能在很久以后才可用，只有在 AJAX 调用成功之后。

所以你可以稍微颠倒一下你的逻辑：

$.get('xmlfile.xml', function(xml) {
    var oXML = $(xml);

    oxml.find('user').each(function(i) {
        var index = i;
        $.getJSON($(this).attr('post'), function(res) {
            data[index].name = $(this).attr('name');
            data[index].pic = $(this).attr('pic');
            data[index].post = res;
        });
    });
});

Answer 2

主要问题是getJSON是异步的

您在data 中的post 属性是null，因为您在这里做错了两件事：

1. getJSON 是异步的，因此它会在您的 .each 已经执行后获取您的数据
2. getJSON 不返回数据，而是返回 jqXHR 对象

尝试这样改变它：

var data = []; // you likely want an array and not an object
var counter = 0;

$.get('xmlfile.xml', function(xml) {

    var oXML = $(xml);

    oxml.find('user').each(function(i) {
        var me = $(this);

        data.push({
            name: me.attr('name'),
            pic: me.attr('pic'),
            post: null
        });

        // increment counter
        counter++;

        $.getJSON(me.attr('post'), (function(index) {
            return function(data) {
                data[index].post = data;
                if (!--counter) // when it reaches ZERO
                {
                   setTimeout(function() {
                       // all JSONs have loaded now continue with your stuff
                   }, 0);
                }
            };
        })(i));
    });

});

以上代码还检测所有 JOSN 对象何时已加载，以便您继续处理。

但除此之外，它是这样工作的：

1. 它获取 XML
2. 收到 XML 后，它会遍历 user 元素并准备 data 对象并将它们推送到数组中
3. 对于每个对象，它也会发出 Ajax 调用以获取 JSON 数据
4. 对 JSON 的每次成功调用都会填充正确的 data 对象的 post 属性并减少 counter
5. 当计数器达到零时，一个附加函数正在排队，您可以在其中放置应在所有内容加载并完成后执行的代码。

如果您的 JSON 请求也可能失败，那么我建议使用 $.ajax 而不是 getJSON，这样您还可以提供 error 函数，其中还可以减少 counter。否则，如果只计算成功，它不会达到零。