Django 使用 Django render 将 JSON 传递给 JS

在本文中，我们将介绍如何使用 Django 中的 render 方法将 JSON 对象传递给 JavaScript，以便在前端页面上使用和显示该数据。

Django render 方法简介

Django 是一个流行的 Python Web 开发框架，它提供了一种方便的方式将后端数据传递给前端页面进行展示。其中，render 是 Django 提供的一个方法，用于渲染前端页面并将数据传递给该页面。使用 render 方法可以方便地将 JSON 对象传递给 JavaScript。

render 方法的用法如下所示：

from django.shortcuts import render

def my_view(request):
    context = {
        'data': {'name': 'John', 'age': 30},
    }
    return render(request, 'my_template.html', context)

上述代码中，我们定义了一个视图函数 my_view，其中创建了一个包含 JSON 数据的 context 字典。然后，我们使用 render 方法将该 JSON 对象传递给名为 my_template.html 的模板。

在 JavaScript 中使用传递的 JSON 对象

一旦我们在视图函数中使用 render 方法将 JSON 对象传递给模板，我们可以在 JavaScript 中通过以下方式获取该数据：

<script>
    var data = JSON.parse('{{ data|safe }}');
    console.log(data);
</script>

上述 JavaScript 代码中，我们使用 JSON.parse 方法将传递的 JSON 字符串转换为 JavaScript 对象，然后可以在控制台上打印该对象。注意，我们使用 Django 模板语法（{{ data|safe }}）将 JSON 对象传递给 JavaScript。

接下来，我们可以在前端页面上使用该数据进行各种操作和展示。

示例

为了更好地理解如何在 Django 中传递 JSON 对象给 JavaScript，并在前端页面上使用该数据，我们请看以下示例：

# views.py

from django.shortcuts import render

def my_view(request):
    context = {
        'data': {
            'name': 'John',
            'age': 30,
            'email': 'john@example.com'
        },
    }
    return render(request, 'my_template.html', context)

<!-- my_template.html -->

<!DOCTYPE html>
<html>
<body>
    <h1>Welcome!</h1>

    <script>
        var data = JSON.parse('{{ data|safe }}');
        console.log(data);

        document.write('<p>Name: ' + data.name + '</p>');
        document.write('<p>Age: ' + data.age + '</p>');
        document.write('<p>Email: ' + data.email + '</p>');
    </script>
</body>
</html>

上述示例中，我们在视图函数 my_view 中创建了一个 JSON 字典，并将其传递给名为 my_template.html 的模板。在模板中，我们使用 JavaScript 将传递的 JSON 对象解析为 JavaScript 对象，并在前端页面上展示该数据。

总结

本文介绍了使用 Django 中的 render 方法将 JSON 对象传递给 JavaScript 的方法。通过在视图函数中使用 render 方法，我们可以方便地将后端数据传递给前端页面进行展示和使用。通过示例演示，展示了在 JavaScript 中如何获取和使用传递的 JSON 对象。希望本文对你理解和实践 Django 中传递 JSON 对象给 JavaScript 有所帮助。