jQuery 链接 .load() 请求？答案

【问题标题】：jQuery chaining .load() requests?jQuery 链接 .load() 请求？
【发布时间】：2010-09-17 14:15:04
【问题描述】：

所以我刚才正在使用 jQuery 的 .load()，看起来我们无法将 $("#example").load('./uri.ext #ID') 配置为这样的链接：

$("#example").load('./uri.ext #ID1').load('./uri.ext #ID2').load('./uri.ext #ID3')

如果我们有一个 DIV 模板文件或其他东西来动态构建页面，而不是将 HTML 存储在字符串变量或类似的东西中，这当然会很有用......另外，我们可以将其中的几个保存在一个文件。

理想情况下，我想用该命令嵌套这样的东西：

<div id="example">
    <div id="ID1">
        <div id="ID2">
            <div id="ID3">
            </div>
        </div>
    </div>
</div>

我遇到的问题有两个。首先，请求的async : true 属性会导致触发下一个请求，并且放置不会按预期执行。然后我尝试按顺序运行嵌套的 $("#example").load('./uri.ext #ID1').ajaxCompletes(function () {/next .load()/ })` 最终陷入了一个递归陷阱，该陷阱没有结束并继续发送对这些文件的请求。

对于如何使用我尝试过的语法/方法来完成我所追求的目标有什么想法吗？另外，如果这不是问题，只是我对 jQuery 链接的误解，我会非常感谢任何解释。

【问题讨论】：

我不太确定你想用这个来完成什么。如果你只是嵌套一堆空的 div，你还不如用 ajax 传入一个数组并做一些 .append() 调用
@dave div 是嵌套的例子，我不想嵌套一堆空的 div。 div 可以是表格，也可以包含输入表单或文本段落......在概念上，我将有一个 template.html 文件，我从中请求这些元素，而不是像 var str='<div id="ID3">Lorem Ipsum </div>'

标签： jquery ajax chaining

【解决方案1】：

您需要将它们嵌套在回调函数中以实现此目的：

$('#example').load('./uri.ext #ID1', function() {
  $('#ID1').load('./uri.ext #ID2', function() {
    $('#ID2').load('./uri.ext #ID3', function() {
      // load successful
    });
  });
});

编辑ES6标准：

 $('#example').load('./uri.ext #ID1', () => {
      $('#ID1').load('./uri.ext #ID2', () => {
        $('#ID2').load('./uri.ext #ID3', () => {
          // load successful
        });
      });
    });

【讨论】：

对为什么会发生其他操作有任何见解吗？
按照您之前的设置方式，您的所有调用都绑定到 $("#example") 对象。这就是使用 jquery 进行链接的方式，目标始终相同；我们没有更新以继承您从以前收到的任何结果。

【解决方案2】：

赞成问题和答案。

我使用递归调用提供了一个稍微优雅的解决方案，以防其他人想要在它的基础上进行构建。请注意，这并不能直接回答原始问题的上下文。这是在我自己的解决方案的背景下，但想法是一样的。

var App = App || {};

App.Quiz = (function ($) {
    "use strict";

    var _templates = [{ target: "#quiz_main_template", url: "/UserControls/Quiz/Quiz_Main.tmpl.htm" },
        { target: "#quiz_media_left_template", url: "/UserControls/Quiz/Quiz_Media_Left.tmpl.htm" },
        { target: "#quiz_media_right_template", url: "/UserControls/Quiz/Quiz_Media_Right.tmpl.htm" },
        { target: "#quiz_no_media_template", url: "/UserControls/Quiz/Quiz_No_Media.tmpl.htm" }]

    function loadTemplates(templates, callback) {
        if (templates.length) {
            var nextTemplate = templates.pop();
            $(nextTemplate.target).load(nextTemplate.url, loadTemplates(templates, callback));
        } else {
            callback.call();
        }
    }

    function init() {
        loadTemplates(_templates, function () { alert("Done!");})
    }

    return {
        init: init
    };
})(jQuery);

$(function () {
    App.Quiz.init();
});

【讨论】：