当前位置：首页 > 行业动态 > 正文

django {{ }} js

admin
行业动态
2025-02-01
3

本文介绍了在Django博客应用中实现文章摘要功能的两种方法：一是通过覆写模型的save方法，从正文字段摘取前N个字符保存到摘要字段；二是使用truncatechars模板过滤器直接截取正文的前N个字符作为摘要。

在Django模板语言中，{{ }} 是用于输出变量的占位符，当你想在HTML页面中显示Django视图传递的数据时，可以使用这个语法，有时候你可能需要在这个占位符内嵌入JavaScript代码，以实现更复杂的功能或交互效果。

基本用法

假设你有一个Django视图，它传递了一个名为username 的变量到模板：

from django.shortcuts import render
def my_view(request):
    context = {'username': 'JohnDoe'}
    return render(request, 'my_template.html', context)

在你的模板my_template.html 中，你可以这样使用{{ }} 来显示用户名：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Template</title>
</head>
<body>
    <h1>Welcome, {{ username }}</h1>
</body>
</html>

在{{ }} 中使用 JavaScript

django {{ }} js

如果你想在{{ }} 占位符内嵌入JavaScript代码，可以直接在模板中编写JavaScript，你可能想要动态地更改页面上的某些内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Template with JS</title>
    <script type="text/javascript">
        function greetUser() {
            var username = "{{ username }}";
            document.getElementById("greeting").innerHTML = "Hello, " + username + "!";
        }
    </script>
</head>
<body onload="greetUser()">
    <h1 id="greeting"></h1>
</body>
</html>

在这个例子中，当页面加载时，JavaScript函数greetUser 会被调用，这个函数从Django模板变量username 获取值，并将其插入到页面的某个元素中。

表格示例

假设你有一个包含用户信息的列表，并且你想在表格中显示这些信息：

django {{ }} js

from django.shortcuts import render
def user_list(request):
    users = [
        {'name': 'Alice', 'age': 30},
        {'name': 'Bob', 'age': 25},
        {'name': 'Charlie', 'age': 35}
    ]
    return render(request, 'user_list.html', {'users': users})

在模板user_list.html 中，你可以使用{{ }} 和JavaScript来动态生成表格：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>User List</title>
    <script type="text/javascript">
        function generateTable() {
            var users = {{ users|safe }};
            var table = document.getElementById("userTable");
            for (var i = 0; i < users.length; i++) {
                var row = table.insertRow(i + 1);
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);
                cell1.innerHTML = users[i].name;
                cell2.innerHTML = users[i].age;
            }
        }
    </script>
</head>
<body onload="generateTable()">
    <table id="userTable" border="1">
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </table>
</body>
</html>