Django｜Ajax 入门、JSON 返回、ECharts 图表、文件上传完整笔记

一、初识 Ajax

浏览器传统提交请求方式：URL 地址、Form 表单提交（GET/POST）

特点：页面整体刷新

Ajax：可以偷偷异步发送请求，页面不刷新，局部更新页面，示例使用 jQuery 实现 Ajax。

1.1 Ajax 发送 GET 请求

前端（需要引入 jQuery）

复制代码

<script type="text/javascript">
    function clickMe(){
        $.ajax({
            url:'/task/ajax/',
            type:"GET",
            data:{
                n1:123,
                n2:456,
            },
            success:function (res){
                console.log(res);
            }
        })
    }
</script>

Django 后端视图获取 GET 参数

复制代码

def task_ajax(request):
    print(request.GET)
    return HttpResponse('收到数据了')

1.2 Ajax 发送 POST 请求

Django 默认开启 CSRF 校验，测试可以使用@csrf_exempt装饰器豁免校验。

前端代码

复制代码

<script type="text/javascript">
    function clickMe(){
        $.ajax({
            url:'/task/ajax/',
            type:"POST",
            data:{
                n1:123,
                n2:456,
            },
            success:function (res){
                console.log(res);
            }
        })
    }
</script>

后端视图

复制代码

from django.views.decorators.csrf import csrf_exempt

@csrf_exempt
def task_ajax(request):
    print(request.POST)
    return HttpResponse('收到数据了')

1.3 Ajax 返回 JSON 格式数据

开发中 Ajax 一般返回 JSON 数据，Django 提供JsonResponse快速返回 json 对象。

前端代码

复制代码

<script type="text/javascript">
    $(function (){
        // dom加载完成自动执行
        bindBtn1Event();
    })
    function bindBtn1Event(){
        $('#btn1').click(function (){
            $.ajax({
                url:'/task/ajax/',
                type:"post",
                data:{
                    n1:123,
                    n2:456,
                },
                dataType:'JSON', //自动把后端json字符串转为js对象
                success:function (res){
                    console.log(res);
                    console.log(res.status);
                    console.log(res.data);
                }
            })
        })
    }
</script>

后端代码

复制代码

from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt

@csrf_exempt
def task_ajax(request):
    print(request.POST)
    data_dict={"status":True,'data':[11,22,33,44,55]}
    return JsonResponse(data_dict)

二、Django 全栈知识点回顾

安装 Django

pip install Django
创建 Django 项目

django-admin startproject 项目名字

注意：PyCharm 一键创建 Django 项目，需要检查settings.py，多余自动生成templates配置可按需删除。

创建 APP 并且注册

python manage.py startapp app01

settings.py 注册 APP

复制代码

INSTALLED_APPS = [
    # ...
    'app01.apps.App01Config',
]

⚠️不注册 APP，models.py 模型类无法生成数据库表。

静态文件 static、模板 templates 静态文件、模板一般放置在 app 目录下；模板使用{% static 'xxx' %}加载静态资源。
MySQL 数据库配置 安装驱动：

pip install mysqlclient

需要提前在 MySQL 客户端手动创建数据库。

settings.py 数据库配置

复制代码

DATABASES = {
    'default':{
        'ENGINE':'django.db.backends.mysql',
        'NAME':'day16',
        'USER':'root',
        'PASSWORD':'root',
        'HOST':'127.0.0.1',
        'PORT':3306,
    }
}

数据库迁移 在models.py编写模型类之后执行迁移命令

python manage.py makemigrations
python manage.py migrate
开发流程

urls.py：配置路由，url 与视图函数映射关系
views.py：视图函数，编写业务逻辑
templates：HTML 模板，支持模板语法、模板继承
Form / ModelForm 组件：生成标签、表单校验、保存数据、错误提示
Cookie & Session：保存登录会话信息
中间件：process_request实现全局登录认证拦截
ORM 完成数据库增删改查、分页功能

三、Ajax 拓展

Ajax 业务案例：订单业务中大量使用 Ajax 异步交互。

3.1 图表可视化

常用绘图插件：

Highcharts：国外开源图表库
ECharts ：百度开源国内常用图表库官方文档：快速上手 - 使用手册 - Apache ECharts

3.2 文件上传

form 表单上传文件，必须添加属性：enctype="multipart/form-data"

复制代码

<form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="text" name="username">
    <input type="file" name="avatar">
    <input type="submit" value="提 交">
</form>

后端视图接收文件：

文件对象存储在request.FILES，request.POST只能获取普通表单文本数据。

复制代码

def upload_list(request):
    if request.method == "GET":
        return render(request,'upload_list.html')

    # 获取上传文件对象
    file_object = request.FILES.get("avatar")
    print(file_object.name) # 获取上传文件原始名称

    # 将文件保存到本地磁盘
    f = open(file_object.name,mode='wb')
    for chunk in file_object.chunks():
        f.write(chunk)
    f.close()

    return HttpResponse("文件上传完成")

说明：file_object.chunks()分块读取大文件，避免一次性加载全部文件占用内存。