代码之家 › 专栏 › 技术社区 › Incognito

jquery chaining.load()请求?

chaining ajax jquery

Incognito · 技术社区 · 14 年前

所以我在用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(函数()。{/ 下一个.load()按顺序 /})`它最终进入了一个递归的陷阱,没有结束,而是不断地发送对这些文件的请求。

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

2 回复 | 直到 14 年前

Tilak Madichetti 8 年前

您需要将它们嵌套在回调函数中以实现这一点:

$('#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
        });
      });
    });

S. Brentson 8 年前

把问题和答案都否决了。

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

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();
});