如何在JavaScript中使用Django后端模板变量all_classes

下面介绍几种实用的方法，让你能在JavaScript中直接使用Django视图传递的all_classes数据：

方法1：使用Django的json_script模板标签（推荐） #

这是Django官方推荐的安全方式，适用于Django 2.1及以上版本：

• 在HTML模板的</body>标签前添加代码，将数据序列化为安全的JSON并嵌入DOM：

  {{ all_classes|json_script:"all-classes-data" }}
  

• 在JavaScript文件或<script>标签中读取数据：

  // 解析DOM中的JSON数据
  const allClasses = JSON.parse(document.getElementById('all-classes-data').textContent);
  
  // 示例：遍历输出所有班级名称
  allClasses.forEach(classItem => {
      console.log(classItem.class_name);
  });
  

优势：自动处理特殊字符转义，避免XSS风险，支持复杂数据结构

方法2：直接在模板中定义JavaScript变量 #

如果数据结构简单，可直接将序列化后的Python数据注入JS变量：

• 先在Django视图中把QuerySet序列化为JSON字符串：

  import json
  from django.shortcuts import render
  
  def your_view(request):
      # 假设all_class是从数据库获取的QuerySet
      all_classes_json = json.dumps([{"class_name": cls.class_name} for cls in all_class])
      return render(request, "class.html", {'all_classes': all_classes_json})
  

• 在HTML模板中添加<script>标签定义JS变量：

  <script>
      const allClasses = {{ all_classes|safe }};
  </script>
  

• 之后就能在任意JavaScript代码中直接使用allClasses数组。

方法3：通过隐藏DOM元素存储数据 #

将数据存入隐藏的DOM属性，再用JS读取：

• 在HTML中添加隐藏元素：

  <div id="classes-container" style="display: none;" data-classes='{{ all_classes|json_script:""|safe }}'></div>
  

• 在JavaScript中读取属性值并解析：

  const classesContainer = document.getElementById('classes-container');
  const allClasses = JSON.parse(classesContainer.dataset.classes);
  

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