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 () { /* ... */ });

将添加一个<h4>，启动一个异步$.ajax 调用，然后重复companies 中的下一个条目。 AJAX 调用几乎肯定比$.each 需要更长的时间才能完成，因此它会生成公司名称<h4>s，然后AJAX 调用将完成并添加<p>s。无法保证<p>s 甚至会以正确的顺序添加。

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

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

您可以将 <h4> 内容推送到内部成功处理程序中，但这仍然会让您面临排序问题（即第二个 AJAX 调用可能在第一个之前完成）。我认为最简单的做法是在<h4> 和<p> 元素周围添加带有ID 属性的包装器<div>s，这将为您提供.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 */
            }
        });
    });
}

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