在 Django 中使用 AJAX 数据填充 HTML 表答案

【问题标题】：Populate HTML table with AJAX data in Django在 Django 中使用 AJAX 数据填充 HTML 表
【发布时间】：2018-03-17 08:32:23
【问题描述】：

我的 Django 模板中运行了以下 AJAX 脚本：

function create_table() {
    $.ajax({
        method: "GET",
        url: "/api/data/",
        success: function(data){
            console.log('button clicked')
            console.log(data)
            //$('#table').html('<div class="test">' + data['Name'] +'</div>');
            //$('#table').load('table_to_load.html');

        },
        error: function(error_data){
            console.log("errorrr")
            console.log(error_data)
        }
    })
}
document.getElementById("create_table").onclick = function() {
    create_table();
    return false;
}

此脚本的目的是在单击按钮时创建一个 HTML 表格，该表格由 AJAX 调用获取的字典数据填充。

AJAX 调用正确收集数据，但是，我不知道如何插入表格。

我应该在 AJAX 调用中用纯 Javascript/jQuery 编写表格 HTML 吗？或者也许加载一个预先准备好的 HTML（我如何在调用中引用它的目录？）？

我的首选方法是用 Django 的模板标记语言为表格编写模板，并以某种方式在其中引用 AJAX 获取的数据。比如：

<table>
    <tr>
      <th>dictionary key</th>
      <th>dictionary value</th>
    </tr>
 {% for key, value in dictionary.items %}
   <tr>
       <td>{{ key }}</td>
       <td>
            <a href="{{ value }}">{{ value }}</a>
       </td>
   </tr>
 {% endfor %}
</table>

但我不确定这是否可能。

【问题讨论】：

标签： javascript jquery html ajax django

【解决方案1】：

你可以做任何一种方式，但你似乎试图以两种方式的 1/2 来做。

您可以使用 ajax 进行调用并取回一些 json 数据，然后使用该 json 对象构建 html 字符串并使用 jquery 将该 html 插入页面中的正确位置 - imo 那样没有错, 虽然我个人不喜欢手工拼接 html 语句（主要是因为对于复杂的页面，很难以这种方式设计和调试它们，但对于小块来说还可以）。

另一种方法是让 jquery 调用 django 视图（通过您定义的 url），并让该 django 视图进行数据库调用并使用项目中已经存在的模板作为 html 文档，然后渲染该模板和数据就像你对任何其他 django 页面一样。该视图将返回一个包含 html 的 httpresponse，然后 jquery 会像以前一样将该 html 插入到页面中。

【讨论】：