如何在 Django 框架中将数据传递给 javascript？(1)

📌 相关文章

📜 如何在 Django 框架中将数据传递给 javascript？(1)

📅 最后修改于: 2023-12-03 15:38:15.062000 🧑 作者: Mango

如何在 Django 框架中将数据传递给 javascript？

在 Django 开发中，我们经常需要将后台处理的数据传递给前端JavaScript，以便前端可以对这些数据进行操作和展示。本文将介绍在 Django 框架中如何将数据传递给 JavaScript。

Step 1：在视图函数中获取并处理数据

首先，需要在 Django 视图函数中获取需要传递给 JavaScript 的数据，并进行一些处理。例如，以下代码获取数据库中的用户列表，并计算每个用户的年龄：

from django.shortcuts import render
from datetime import date
from .models import User

def user_list(request):
    users = User.objects.all()

    # 计算每个用户的年龄
    today = date.today()
    for user in users:
        user.age = today.year - user.birthdate.year - ((today.month, today.day) < (user.birthdate.month, user.birthdate.day))

    return render(request, 'user_list.html', {'users': users})

这里将用户列表和每个用户的年龄一起打包成了一个字典 {'users': users}，准备通过 Django 模板传递给前端。

Step 2：在 Django 模板中将数据传递给 JavaScript

接下来，需要在 Django 模板中将数据传递给前端的 JavaScript。假设我们需要在 HTML 页面中显示所有用户的姓名和年龄，以下是一个示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>User List</title>
    <script type="text/javascript">
        var users = {{ users|safe }};
        for (var i = 0; i < users.length; i++) {
            document.write(users[i].name + ' is ' + users[i].age + ' years old.<br>');
        }
    </script>
</head>
<body>
    <h1>User List</h1>
</body>
</html>

其中，{{ users|safe }} 将 users 变量作为 JSON 字符串传递给 JavaScript。通过 for 循环遍历 users 列表中的每个用户，并显示每个用户的姓名和年龄。

注意 |safe 的使用，这是为了告诉 Django 模板引擎不要将 users 变量转义为 HTML 编码，否则 JSON 格式会被破坏。

Step 3：在 JavaScript 中处理数据

最后，JavaScript 可以自由处理前端获取的数据。以下是一个示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>User List</title>
    <script type="text/javascript">
        var users = {{ users|safe }};
        for (var i = 0; i < users.length; i++) {
            var user = users[i];
            var name_element = document.createElement('div');
            name_element.innerText = user.name;

            var age_element = document.createElement('div');
            age_element.innerText = user.age;

            var user_element = document.createElement('div');
            user_element.appendChild(name_element);
            user_element.appendChild(age_element);

            document.body.appendChild(user_element);
        }
    </script>
</head>
<body>
    <h1>User List</h1>
</body>
</html>

这里将每个用户的信息创建为一组 div 元素，并添加到 HTML 页面中。这个过程可以自由根据需求进行定制。

总结

以上就是在 Django 框架中将数据传递给 JavaScript 的完整步骤。首先在视图函数中获取并处理数据，然后在 Django 模板中将数据传递给 JavaScript，最后在 JavaScript 中处理数据或者展示数据。这个过程可以根据需求进行自由定制，希望本文能对 Django 开发者有所帮助。