Django页面加载时如何使用views.py的上下文数据填充表格行？

• Django的render方法生成的页面内容仅会返回给触发请求的调用方：你通过前端fetch发起POST请求时，渲染好的带数据的页面只会被fetch的回调函数接收，不会自动替换当前浏览器已经加载的空maclists页面，因此你看不到上下文传递的数据。
• 你从userlist页面跳转至maclists页面时，首次GET请求加载的页面本身没有携带username参数，后端返回的初始页面没有machines相关上下文数据，后续fetch请求的结果也没有被插入到当前页面结构中。

方案1：修改现有逻辑，前端动态渲染表格 #

保留现有localStorage和fetch逻辑，调整前后端交互格式，由前端完成表格渲染：

1. 后端修改处理fetch POST请求的视图，直接返回JSON数据而非渲染页面：

from django.http import JsonResponse

# 处理POST请求的视图示例
def query_user_machines(request):
    if request.method == "POST":
        username = request.POST.get("username")
        # 原有查询QuerySet、转换为字典列表listsofmac的逻辑保持不变
        return JsonResponse({"machines": listsofmac})

2. 前端fetch拿到返回的JSON后，动态生成表格内容插入到页面：

window.onload = function () {
  const username = localStorage.getItem("username");
  // 注意补充CSRFToken到请求头，否则Django会返回403错误
  const csrftoken = document.cookie.match(/csrftoken=([^;]+)/)[1];
  
  fetch("/你的POST请求对应的路由地址", {
    method: "POST",
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
      "X-CSRFToken": csrftoken
    },
    body: `username=${encodeURIComponent(username)}`
  })
  .then(res => res.json())
  .then(data => {
    const tableBody = document.querySelector("#machine-table-body");
    tableBody.innerHTML = "";
    // 遍历数据生成表格行
    data.machines.forEach(item => {
      const tr = document.createElement("tr");
      tr.innerHTML = `
        <td>${item.machineid}</td>
        <td>${item.machinename}</td>
        <td>${item.protocol}</td>
        <td>${item.port}</td>
        <td>${item.targetip}</td>
      `;
      tableBody.appendChild(tr);
    })
  })
}

3. 前端maclists.html的表格预留对应结构即可：

<table>
  <thead>
    <tr>
      <th>设备ID</th>
      <th>设备名称</th>
      <th>协议</th>
      <th>端口</th>
      <th>目标IP</th>
    </tr>
  </thead>
  <tbody id="machine-table-body"></tbody>
</table>

方案2：改用URL传参，后端直接渲染完整页面（更符合Django开发规范，性能更优） #

去掉localStorage和fetch的多余逻辑，用常规服务端渲染方案实现：

1. userlist页面点击跳转时，直接将username作为URL参数拼接在maclists页面地址后，例如跳转地址为/maclists?username=当前点击的用户名。
2. 后端maclists页面的GET请求视图直接接收参数、查询数据、渲染页面：

def maclists_view(request):
    username = request.GET.get("username")
    # 原有查询QuerySet、转换为字典列表listsofmac的逻辑保持不变
    return render(request, "users/maclists.html", {"machines": listsofmac})

3. 前端maclists.html直接用Django模板语法渲染表格：

<table>
  <thead>
    <tr>
      <th>设备ID</th>
      <th>设备名称</th>
      <th>协议</th>
      <th>端口</th>
      <th>目标IP</th>
    </tr>
  </thead>
  <tbody>
    {% for machine in machines %}
    <tr>
      <td>{{ machine.machineid }}</td>
      <td>{{ machine.machinename }}</td>
      <td>{{ machine.protocol }}</td>
      <td>{{ machine.port }}</td>
      <td>{{ machine.targetip }}</td>
    </tr>
    {% empty %}
    <tr>
      <td colspan="5">暂无关联设备数据</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

内容的提问来源于stack exchange，提问作者ViperVille