Django 网页中加入 JavaScript|极客教程

Django 网页中加入 JavaScript

在开发网页应用程序时，JavaScript 是一个非常重要的组成部分。它可以用来实现动态效果、交互功能、表单验证等。而在 Django 中，我们可以很方便地将 JavaScript 加入到网页中。

本文将详细介绍在 Django 网页中如何加入 JavaScript，包括直接引入外部 JavaScript 文件、内联 JavaScript 代码以及在视图中传递数据给 JavaScript。

直接引入外部 JavaScript 文件

在 Django 中，我们可以在模板文件中直接引入外部的 JavaScript 文件。一般来说，这些 JavaScript 文件会被存放在静态文件夹中，例如 static/js/。

下面是一个示例，展示了如何在 Django 模板中引入一个外部的 JavaScript 文件：

<!-- templates/index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Homepage</title>
</head>
<body>
    <h1>Welcome to our website</h1>

    <!-- 引入外部 JavaScript 文件 -->
    <script src="{% static 'js/main.js' %}"></script>
</body>
</html>

在上面的示例中，我们在模板文件 index.html 中使用了 {% static 'js/main.js' %} 模板标签来引入外部的 JavaScript 文件 main.js。该 JavaScript 文件应该存放在 Django 项目中的 static/js/ 目录下。

内联 JavaScript 代码

除了引入外部 JavaScript 文件，我们还可以在 Django 模板中直接编写内联的 JavaScript 代码。这样可以方便地在网页中添加一些简单的交互效果。

下面是一个示例，展示了如何在 Django 模板中添加内联的 JavaScript 代码：

<!-- templates/index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Homepage</title>
</head>
<body>
    <h1>Welcome to our website</h1>

    <!-- 内联 JavaScript 代码 -->
    <script>
        alert("Hello, Django!");
    </script>
</body>
</html>

在上面的示例中，我们直接在 <script> 标签中编写了一个 alert 弹窗的 JavaScript 代码。当用户访问该网页时，会显示一个弹窗显示 “Hello, Django!”。

在视图中传递数据给 JavaScript

有时候我们需要在 Django 视图中传递一些数据给 JavaScript，以便在网页中使用。这种情况下，我们可以通过将数据渲染到模板中，然后让 JavaScript 从模板中获取这些数据。

下面是一个示例，展示了如何在 Django 视图中传递数据给 JavaScript：

# views.py

from django.shortcuts import render

def index(request):
    data = {
        'name': 'Alice',
        'age': 30
    }
    return render(request, 'index.html', {'data': data})

<!-- templates/index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Homepage</title>
</head>
<body>
    <h1>Welcome to our website</h1>

    <!-- 传递数据给 JavaScript -->
    <script>
        var data = {{ data|safe }};
        console.log(data);
    </script>
</body>
</html>

在上面的示例中，我们在 Django 视图中定义了一个字典 data，然后将其传递给模板 index.html。在模板中，我们使用 {{ data|safe }} 模板变量来输出这个字典，并在 JavaScript 中获取并打印该数据。

结论

在 Django 网页中加入 JavaScript 可以为网页添加交互功能和动态效果。本文介绍了在 Django 中引入外部 JavaScript 文件、添加内联 JavaScript 代码以及在视图中传递数据给 JavaScript 的方法。通过这些技巧，我们可以更好地利用 JavaScript 来丰富我们的网页应用程序。