Django模板如何将视图自定义模型动态数据正确传递给JavaScript

现有代码的核心错误 #

• 视图层context字典的键名"news "尾部多了空格，模板无法匹配到news变量
• 模板中错误使用{{request.news}}取值：自定义传入的上下文变量不是request对象的属性，直接写{{ news }}才能取到
• 直接渲染QuerySet对象得到的是Django模型的字符串表示，不是JS可识别的数组结构，按数组遍历实际是在逐字符读取字符串，才会出现零散随机字符
• 未指定读取News模型的news_today字段，直接渲染模型实例只会得到News object (x)这类无意义内容
• 原视图代码缺失render返回逻辑，请求根本无法正常返回页面

修正步骤 #

1. 调整视图层逻辑 #

提前提取需要的字段，序列化成JSON格式再传入模板，修正键名和返回逻辑：

import json
from django.shortcuts import render
from .models import News

def test(request):
    # 提取所有新闻的文本内容，生成Python原生列表
    news_content_list = list(News.objects.values_list('news_today', flat=True))
    context = {
        # 序列化为JSON字符串，键名不要带多余空格
        "news": json.dumps(news_content_list)
    }
    return render(request, '你的模板路径.html', context)

如果新闻内容包含用户提交的不可信数据，不要直接用json.dumps渲染，优先用Django内置的json_script标签规避XSS风险

2. 调整模板代码 #

首先添加新闻展示的DOM节点，再修正JS取值逻辑，用safe过滤器避免Django转义JSON格式的特殊字符：

<!-- 新闻轮换展示的容器 -->
<div id="changeText"></div>

<script>
// 加safe过滤器，直接拿到JS可识别的数组
var text = {{ news|safe }};

var counter = 0;
var elem = document.getElementById("changeText");
// 页面加载后先展示第一条新闻
elem.innerHTML = text[counter];
var inst = setInterval(change, 5000);

function change() {
  counter++;
  if (counter >= text.length) {
    counter = 0;
  }
  elem.innerHTML = text[counter];
}
</script>

Django 4.0+ 推荐更安全的传值写法，避免XSS问题：

<!-- 模板里先把JSON数据写入隐藏script标签 -->
{{ news|json_script:"newsData" }}
<script>
// JS里读取解析即可
var text = JSON.parse(document.getElementById('newsData').textContent);
// 后续轮换逻辑和上面一致
</script>

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