Django 将列表传递给 JavaScript

在 Web 开发中，我们经常需要将后端 Python 代码中的数据传递到前端 JavaScript 中进行操作和渲染。本文将介绍如何在 Django 中将列表数据传递给 JavaScript。

第一步：在视图函数中将列表数据传递给模板

假设我们有一个视图函数，它从数据库中获取了一些数据，并将这些数据传递给模板：

from django.shortcuts import render
from myapp.models import MyModel

def my_view(request):
    my_data = MyModel.objects.all()  # 假设这里获取的数据是一个模型实例列表
    return render(request, 'my_template.html', {'my_data': my_data})

在这个示例中，my_data 是一个模型实例列表，它将通过模板传递给前端 JavaScript。

第二步：在模板中使用 JSON 序列化将列表转换为 JavaScript 中的数组

在模板中，我们可以使用 JSON 序列化将 Python 中的列表转换为 JavaScript 中的数组。在 Django 中，可以使用内置的 json_script 模板标签将数据转换为 JSON 格式，并将其嵌入到 HTML 文档中：

{% extends "base.html" %}

{% block content %}
  <h1>My data</h1>

  <ul>
    {% for obj in my_data %}
      <li>{{ obj.name }}</li>
    {% endfor %}
  </ul>

  {{ my_data|json_script:"my_data" }}  <!-- 将 my_data 转换为 JSON，并将其嵌入到 script 标签里 -->
{% endblock %}

在这个示例中，我们使用了 Django 内置的 json_script 模板标签，它将 my_data 列表转换为 JSON 格式，并将其嵌入到一个 id 为 my_data 的 script 标签中。这样，我们就可以在前端 JavaScript 中使用 my_data 变量来引用转换后的数组。

第三步：在 JavaScript 中使用列表数据

最后，在前端 JavaScript 中，我们可以通过获取 script 标签的 innerHTML 属性来获取 JSON 格式的数据，并将其转换为 JavaScript 中的数组。在本例中，我们可以使用以下代码获取 my_data 数组：

var my_data_json = document.getElementById('my_data').innerHTML;
var my_data = JSON.parse(my_data_json);

在这个示例中，我们通过获取 id 为 my_data 的 script 标签的 innerHTML 属性来获取 JSON 数据，并将其使用 JSON.parse 转换为 JavaScript 数组。

总结

在 Django 中将列表数据传递给 JavaScript 的过程包括以下步骤：

1. 在视图函数中将数据传递给模板
2. 在模板中使用 json_script 标签将数据转换为 JSON 并嵌入到 HTML 文档中
3. 在前端 JavaScript 中获取 JSON 数据并将其转换为 JavaScript 数组

通过这些步骤，我们可以轻松地将 Django 中的数据传递到前端 JavaScript 中进行操作和渲染。