0

我正在编写一些 jquery 来获取一组 xml 文件。然后它将遍历这些并解析它们以在页面上显示它们。我有这个工作但我想做的一件事是在它列出内容之前，我希望它打印文件的名称。这是我的代码。

$.get('inc/getMenuFiles.php', function(data) {
    var catSplit = data.split(",");
    var menuitems = $('.menuitems');
    menuitems.empty();

    for (i=2; i<catSplit.length; i++) {

        url = "inc/menulists/" +catSplit[i].replace(/"/g, '').replace(/]/g, '');
        catName = catSplit[i].replace(/"/g, '').replace(/.xml/g, '').replace(/]/g, '');

        menuitems.append(catName);

        $.ajax({
            type: "GET",
            url: url,
            dataType: "xml",
            success: function(xml) {
                $(xml).find('item').each(function(){
                    var name =  $(this).find('name').text();
                    var price = $(this).find('price').text();
                    menuitems.append(name + " - $" +price + "<br />");
                });
            }
        });
    }
});

这是无效的，但如果我这样做，它会起作用

$.ajax({
                type: "GET",
                url: url,
                async: true,
                dataType: "xml",
                success: function(xml) {
                    $(xml).find('item').each(function(){
                        var name = $(this).find('name').text();
                        var price = $(this).find('price').text();
                        menuitems.append(name + " - $" +price + "<br />");
                    });
                }
            }).delay();

所以我想我只需要在那个ajax调用之后适当地添加一个延迟

4

2 回答 2

1

发生这种情况是因为您的 Ajax 回调在当前执行路径完成之前不会执行。要解决这个问题，您可以等到在 ajax 回调中追加 catName。这应该有效：

$.get('inc/getMenuFiles.php', function(data) {
    var catSplit = data.split(",");
    var menuitems = $('.menuitems');
    menuitems.empty();

    for (i=2; i<catSplit.length; i++) {

        url = "inc/menulists/" +catSplit[i].replace(/"/g, '').replace(/]/g, '');
        catName = catSplit[i].replace(/"/g, '').replace(/.xml/g, '').replace(/]/g, '');

        $.ajax({
            type: "GET",
            url: url,
            dataType: "xml",
            success: (function(catName){
                return function(xml) {
                    menuitems.append(catName);

                    $(xml).find('item').each(function(){
                        var name =  $(this).find('name').text();
                        var price = $(this).find('price').text();
                        menuitems.append(name + " - $" +price + "<br />");
                    });
                }
            })(catName)
        });
    }
});

您仍然（就像在您的原始代码中一样）无法保证您的请求可以完成的顺序，因此有时appetizers.xml会beer.xml以相反的顺序加载。

于 2012-06-19T18:27:41.800 回答
0

发生这种情况是因为您的 for 循环比 AJAX 调用更快。请记住，AJAX 中的第一个A代表异步。画出这个...

您正处于 for 循环的开头。您取第一个catName，并将其附加到menuitems. name然后你启动一个 AJAX 调用来获取price. 同时，AJAX 请求还没有响应，所以我们将一个移动到第二个，启动另一个 AJAX 请求。第一个还没有完成，我们刚刚发出了第二个请求；所以现在我们有 2 个 AJAX 响应待处理。与此同时，我们继续第三个。itemcatNamecatNamecatName

等等等等...

解决方案

  1. 将async内部 AJAX 调用中的属性设置为false. 这将使 for 循环暂停，直到请求完成。
  2. ** PREFERRED **在 for 循环之前进行 AJAX 调用，将响应存储在某处（可能在数组中），然后使用此数组运行 for 循环。
于 2012-06-19T13:10:46.140 回答