如何在后台通过ajax加载块？

Posted 2023-02-24

【中文标题】如何在后台通过ajax加载块？

【英文标题】：How to load block by ajax in background?

【发布时间】：2018-07-05 11:38:27

【问题描述】：

我的模板中有由Nestable2 插件创建的树结构。我使用下一个 html 渲染树结构，您可以在下面看到。它可以工作，但渲染一些包含大量数据的繁重页面太慢了。

默认情况下，当用户打开页面树时是折叠的。我首先显示***节点，然后检查它们是否有后代。你可以在html中看到它。当我检查此行中节点的所有后代时，数据库的主要负载发生：node.get_children。

问题：是否可以在打开页面时在后台通过ajax 加载这部分% if node.get_children % *** % endif %？我想知道你的想法，我会很感激你的例子。我的目标是加快页面加载速度。

ma​​in.html：

<ol class="dd-list">
% for node in nodes %
    % include "tree_template.html" %
% endfor %
</ol>

tree_template.html：

<li class="dd-item dd3-item" data-id="node.id">
    <div class="dd-handle dd3-handle"></div>
    <div class="dd-content dd3-content">***</div>

    % if node.get_children %
    <ol class="dd-list">
        % for child in node.get_children %
            % with node=child template_name="tree_template.html" %
                % include template_name %
            % endwith %
        % endfor %
    </ol>
    % endif %
</li>

【问题讨论】：

您的模板是否在服务器上呈现？

你好@Sergiu :) 好吧，当然不是那样，但很接近。我在视图中创建nodes（***节点）并将它们发送到django模板，然后我通过内置模板标签for呈现它。之后，我检查每个节点是否有孩子的可用性。 get_children 方法在models.py 文件中设置。你有什么想法吗？

如果我理解正确，您想按需加载 html 页面的特定部分吗？

就我而言，它不仅仅是一个特定的部分。它们可以是几个这样的特定部分，因为每个节点都可能有子节点。我想在页面打开时以后台模式加载这几个部分。

那么我相信你应该在你的服务器上有一个 DOM（一个虚拟 DOM）的表示，这样你就可以从中查询特定的部分并将其返回给客户端。

【参考方案1】：

当调用 url 时，模板标签由服务器呈现，所以你不能。

您可以在 ajax 控制器中使用render_to_string：

def ajax_view(request, node):
    data = dict()
    for child in node.get_children():
       data[child] = render_to_string(
           'tree_template.html',
           'node': child
       )
    return JSONResponse(data) 

然后使用一些 javascript 将它们添加到您的页面。

【讨论】：

您好！ :) 我有点困惑。我需要何时以及如何触发此功能？

你说你想用ajax对吧？这个函数是一个 django 视图，只需调用它的 url。

在我看来，这段代码不考虑节点的递归嵌套，还是我错了？在我的情况下，树的最大深度是 6。我还需要更改模板吗？

【参考方案2】：

您还可以考虑在页面加载后使用 JSRender (https://www.jsviews.com/) 通过 AJAX 获取数据，然后使用 JSRender 模板动态生成内容。

【讨论】：

您好！ :) 感谢您提供此链接。我从来没有听说过这个插件。你能根据我的情况给我看一些例子吗？

基本上您必须执行以下操作：1) 将您的“tree_template.html”转换为嵌入 HTML 代码中脚本标签的 JSRender 模板（jsview.com 上的示例）。 2) 页面加载完毕后，用JavaScript 向后端执行AJAX 请求以加载动态数据。后端必须以 JSON 格式返回数据，然后可以通过调用 JSRender 模板将其动态插入到您的 HTML 中。 [jsviews.com/#jsrplaying]