是否可以仅使用 Django 异步呈现模板/页面的不同部分/选项卡？答案

【问题标题】：Is it possible to render different parts/tabs of a template/page asynchronously with Django only?是否可以仅使用 Django 异步呈现模板/页面的不同部分/选项卡？
【发布时间】：2020-07-03 07:17:47
【问题描述】：

我的一个页面中有 4 个标签。一些选项卡需要更长的后端处理，但我不希望页面等待每个选项卡，而是希望每个选项卡在准备好后立即显示。到目前为止，我为每个选项卡使用了 rest api，然后在 JS 中创建了整个选项卡。但我更喜欢使用 Django 模板。

有没有办法让我仍然可以在 Django 模板中创建每个选项卡？

<div class="tab-content">
  <div id="tab1" class="tab-pane fade in active">
    {% include 'my_project/tab1.html' %}
</div>
<div id="tab2" class="tab-pane fade">
    {% include 'my_project/tab2.html' %}
</div>
<div id="tab3" class="tab-pane fade">
    {% include 'my_project/tab3.html'%}
</div>
<div id="tab4" class="tab-pane fade">
    {% include 'my_project/tab4.html'%}
</div>

我有一个 URL，我希望这个 URL 调用 4 个后端视图处理程序来呈现每个选项卡 html。

【问题讨论】：

AJAX+REST 是正确的方法。如果您想为异步部分使用模板 - 尝试返回渲染（就 django 而言）模板作为对 REST 调用的响应。转向 VUE 或 React 等前端框架也不错。

标签： django django-templates

【解决方案1】：

姜戈

def get_tab1(request) # called by get_tab1 in urls.py
    ....
    return render(request,  "tab1.html", {<whatever data>})

模板

<div id = tab1></div>
<div id = tab2></div>
etc.

每个标签都有 HTML 模板。

JS （这里的 Ajax 是 jQuery。但是 JS 为普通 JS 做 ajax）

// get tab html and insert it in page
$.ajax({
    type: "POST",
    url: "get_tab1/", 
    data: {},
    success: function(data){
      document.getElementById("tab1").innerHTML = data;
    }
    ,error: function() {
    } 
 });

您可能会遇到此代码的 CSRF 问题。我为每个发布请求提供 CSRF 令牌，但您也可以将视图设为 @csrf_exempt。或者让它GET。

【讨论】：