jQuery 嵌套 Ajax 调用不起作用

Question

我正在尝试进行嵌套 ajax 调用，但迭代不起作用：假设我有 2 家公司，其中公司号 1 有 2 个联系人，公司号 2 有 3 个联系人。我不明白为什么，但下面给出的代码显示两个公司名称，后跟五个联系人姓名：它不是嵌套的......

    <script type="text/javascript">
    $(function () {
        $('#searchbutton').bind('click', function (event) {
            $("#result > h4, #result > p").remove();
            $("<p>Loading...</p>").appendTo($("#result"));
            $.ajax({
                type: "GET",
                dataType: "jsonp",
                cache: true,
                url: "http://localhost/archilab/archilabdirectory.svc/",
                data: ("tag=" + $("#searchstring").val()),
                success: function (companies) {
                    $("#result > p").remove();
                    $.each(companies, function () {
                        var outer = this;
                        $("<h4>", { text: outer.Name + " (" + outer.Perimeter + ")" }).hide().appendTo($("#result")).show(4000, function () {
                            $.ajax({
                                type: "GET",
                                dataType: "jsonp",
                                cache: true,
                                url: "http://localhost/archilab/archilabdirectory.svc/" + outer.Name + "/contacts/",
                                success: function (contacts) {
                                    $(contacts).each(function () {
                                        $("<p>", { text: this.FirstName + " " + this.LastName }).hide().appendTo($("#result")).show();
                                    });
                                }
                            })
                        });
                    });
                }
            });
        })
    });
</script>

Answer 1

您确实意识到您的 $.ajax 调用是异步的，对吧？此 each：

$.each(companies, function () { /* ... */ });

将添加一个

，启动异步 $.ajax 调用，然后重复 中的下一个条目>公司。 AJAX 调用几乎肯定比 $.each 需要更长的时间才能完成，因此它将生成公司名称

，然后 AJAX 调用将完成并且添加

。甚至无法保证

将以正确的顺序添加。

如果您需要事情按特定顺序发生，那么您将必须添加 async： false 到您的 $.ajax 调用。

更新：我需要比评论提供的空间多一点的空间。不，这不是我的最后一个定理。

您可以将

内容推送到内部成功处理程序中，但这仍然会让您面临排序问题（即第二个 AJAX 调用可能会在第一个 AJAX 调用之前完成）。我认为最简单的方法是在

和

周围添加带有 ID 属性的包装器

code> 元素，这将为您提供 .append 调用的简单目标；有点像这样：

$.each(companies, function() {
    var $wrapper_hack = $('<div/>');
    $('#result').append($wrapper_hack);
    add_content($wrapper_hack, outer);
});

// And elsewhere...
function add_content($wrapper_hack, outer) {
    $("<h4>", {
        text: outer.Name + " (" + outer.Perimeter + ")"
    }).hide().appendTo($wrapper_hack).show(4000, function () {
        $.ajax({
            /* ... */
            success: function(contacts) {
                /* Build your <p> and append it to $wrapper_hack */
            }
        });
    });
}

这个想法是将内容附加到仅附加到右侧

的内容，而不是附加到 #result；然后，所有内容都会以正确的顺序出现，因为您已在 HTML 元素嵌套中嵌入了正确的顺序。您需要将 add_content 作为单独的函数来正确地将 $wrapper_hack 和 outer 本地化为所需的上下文，从而避免常见的关闭问题。