如何在 Django 中自动更新模板？答案

【问题标题】：How to update templates automatically in Django?如何在 Django 中自动更新模板？
【发布时间】：2020-04-22 13:08:08
【问题描述】：

假设我有一个这样的基本模型：

class Text(models.Model):
    msg = models.TextField()

我正在渲染一个像这样的模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <h1>Messages<h2><br>
        {% for message in messages %}
            <a> {{forloop.counter}} - {{message}} <br>
        {% endfor %}
</body>
</html>

有对应的视图：

from django.shortcuts import render
from .models import Text

def home(request):
    context = {
        "messages": Text.objects.all(),
    }
    return render(request, 'app/home.html', context)

假设我正在通过管理页面创建 Text 的新对象。如果我保存一个对象，我想在不刷新页面的情况下呈现它。我对 Javascript/jQuery/AJAX 没有很好的了解，但我知道借助它可以实现。谁能指导我如何在不刷新页面的情况下呈现内容？

【问题讨论】：

为什么有人投票以“寻求有关书籍、工具、软件库等的建议”来结束这个？ OP 没有要求这个 AFAICT 的任何内容？
我担心这个问题有点太宽泛了——有很多方法可以做到这一点，从简单的旧（而且相当粗糙）的 ajax 轮询到更现代的（并且涉及更多的）技术像 websockets （参见 django-channel ）。现在记录了如何使用 jQuery 进行 ajax 调用和更新 DOM 的一部分，如何设置轮询只是使用 js setInterval() 的问题，并且您已经知道如何在 Django 中返回响应（nb：you'我可能想要一个独特的视图来查看返回最少需要的 html 片段的 ajx 请求，以避免浪费 cpu 周期和内存）。

标签： javascript python jquery django ajax

【解决方案1】：

在这种情况下，投票是我想到的第一个选项。你要做的是创建一个返回JsonResponse 的视图。希望您知道如何通过 JsonResponse 视图返回查询集对象

直截了当，允许视图返回Text.objects.all()，在此之前您需要使查询集对象可序列化。在优化方式中，您可以检查模型（表）条目是否真的被修改，如果是，则仅发送修改后的条目，或者为简单起见发送所有条目。

假设你在 html 中有这个结构

<div>
        <h1>Messages<h2><br>
        <div id = "msg-block">
            <a></a>
        </div>
</div>

关于ajax的观点，这样做

function update_messages(data){
     // suppose msg-block, is id of div enclosing all links, header div is sepreate
     str = ""
     for(var i = 0; i < data.length; i++){
         str += `<a> ${data[i]} </a>`
     }
    $("#msg-block").html(str)

}

setInterval(function() {
     $.ajax({
                type: "POST",
                url: "<url-to-json-view>",           
                data : {csrfmiddlewaretoken:document.getElementsByName('csrfmiddlewaretoken')[0].value},
                success: function(data)
                {
                    console.log("Success  : ", data)
                    // function to update the table
                    update_messages(data)
                },
                error: function(request, status, error)
                {
                    alert(request.responseText);
                }
            });  
}, time-interval-in-ms)

将其包含在脚本标记中，在您的网页中以及在正常情况下通过 ajax 调用获取数据。

【讨论】：