Django高级扩展之静态文件和ajax使用

最新推荐文章于 2025-12-10 13:45:56 发布

原创最新推荐文章于 2025-12-10 13:45:56 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#django #ajax #python

Django 专栏收录该内容

60 篇文章

订阅专栏

该文详细介绍了在Django框架下如何管理静态文件，包括创建静态文件目录，配置Settings.py，创建CSS、JS和图片文件，以及如何在模板中调用。同时，文章还讲解了路由与视图的设置，使用Ajax进行动态数据请求的应用场景和实现方法，包括Ajax的路由、视图和模板响应。最后，文中强调了静态文件路径的优化和管理，以及Ajax在获取JSON数据时的作用。

使用静态文件

css、js、图片、json文件、字体文件等

创建静态文件目录

一般在project下创建static文件夹。

在创建一个对应项目的myapp文件夹。

myapp中创建css、js、img文件夹。

如图：

Settings.py配置

静态目录设置在工程目录下settings.py中，

修改STATIC_URL配置。

默认情况下是static，这个文件夹就是用来存放静态文件的。

Django会在应用程序根目录下查找static文件夹。

如图：

在STATIC_URL下增加STATICFILES_DIRS配置，

内容如下：

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]

创建css文件

在static/myapp/css下创建style.css

设置h1标签字体颜色

* {
    margin: 0;
    padding:0;
}

h1 {
    color:red;
}

路由与视图

设置路由

# 静态调用

path('static_show', views.static_show, name='static_show'),

视图

在视图中设置显示模板

def static_show(request):
    """ 静态调用 """

    return render(request, 'myapp/show.html')

模板使用静态文件

调用css

在工程目录projects/templates/myapp/下创建模板测试调用css效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="/static/myapp/style.css">
</head>
<body>
    <h1>我是标题 我最帅</h1>
</body>
</html>

调用js

添加jquery.js放入js目录

模板引入

<script src="/static/myapp/js/jquery.js"></script>

<script>

    $(function() {

        alert('我是弹窗')

    })

</script>

自己创建的js文件也是一样放置和引入。

效果：

调用图片

找一张图片放入static/myapp/img目录中。

在模板中使用图片，如下：

<body>
    <h1>我是标题 我最帅</h1>
    <img src="/static/myapp/img/1.jpg" alt="">
</body>

优化路径

加载标签

使用一开始在settings.py中路径设置，首先需要加载static标签。

在模板最顶部添加以下代码：

{% load static %}

修改文件路径

静态文件调用的路径也需要修改，不在使用硬编码路径。

{% static %}标签用于生成静态文件的绝对路径。

修改图片路径

<body>
    <h1>我是标题 我最帅</h1>
    <img src="/static/myapp/img/1.jpg" alt="">
    <img src="{% static 'myapp/img/1.jpg' %}" alt="">
</body>

修改js路径

<script src="{% static 'myapp/js/jquery.js' %}"></script>

修改css路径

<link rel="stylesheet" href="{% static 'myapp/css/style.css' %}">

主要解决如果静态文件路径改变后链接访问不到的问题。

注意：

img使用STATIC配置路径

js/css使用STATICFILE_DIR配置路径

如果暂时隐藏路径尝试配置效果，可能因浏览器缓存，出现误差效果。

使用Ajax

应用场景

需要动态生成，请求json数据。

示例

接下来将通过设置路由、视图和模型来进行具体使用的示例演示。

路由

# 使用ajax
path('ajax_show', views.ajax_show, name='ajax_show'),
path('ajax_use', views.ajax_use, name='ajax_use'),

视图

第一个视图方法显示模板页面；第二个方法接收到请求后，查询所有班级信息处理组装好数据后，调用jsonResponse处理数据为json并响应。

def ajax_show(request):

    render(request, 'myapp/show.html')


from django.http import JsonResponse
def ajax_use(request):

    gradess = Grades.objects.all()
    list = []
    for g in gradess:
        list.append([g.name, g.boy_num, g.girl_num])

    return JsonResponse({'list': list})

模板

显示模板，并在模板中设置按钮激活ajax请求后端接口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="{% static 'myapp/css/style.css' %}">
    <script src="{% static 'myapp/js/jquery.js' %}"></script>
    <script src="{% static 'myapp/js/main.js' %}"></script>
</head>
<body>
    <h1>我是标题 我最帅</h1>
    <h2>班级信息列表</h2>
    <button id="dian">请求班级信息</button>
</body>

Javascript

在static/myapp/js目录下创建main.js，

在这里设置ajax请求视图处理。

内容如下：

$(function(){
    $('#dian').click(function(){
        $.ajax({
            type:'get',
            url:'/myapp/ajax_use',
            dataType:'json',
            success:function(data, status) {
                console.log(status);
                console.log(msg);
            }
        })
    })
})

效果：