AJAX

什么是AJAX

AJAX 就是在不需要重新加载整个页面，就可以与后端异步交互数据，提交并更新部分网页内容。

AJAX与FORM表单区别

Ajax提交数据页面不用刷新原始数据还在，处理数据的过程中不影响页面其他操作

Form表单提交数据页面刷新，原始数据不在并且处理数据的过程中无法做其他操作

示例1

页面输入两个整数，通过AJAX传输到后端计算出结果并返回。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="text" id="num1">+<input type="text" id="num2">=<input type="text" id="num3">
<button id="btn">计算</button>
</body>
<script>
    $('#btn').click(function () {
        // 获取两个框内的数据
        let num1Val = $('#num1').val();
        let num2Val = $('#num2').val();
        //  发送ajax请求传输数据
        $.ajax({
            url: '',  // 不写默认就是当前页面所在地址
            type: 'post',  // 指定当前请求方式
            data: {
                'num1': num1Val,
                'num2': num2Val,
            },  // 请求携带的数据
            success: function (args) {  // 异步回调函数，后端有回复自动触发
                $('#num3').val(args)
            }
        })
    })
</script>
</html>

view.py

from django.shortcuts import render, HttpResponse, redirect
from django.views.decorators.csrf import csrf_exempt
@csrf_exempt
def index(request):
    print(request.is_ajax())
    if request.is_ajax():  # 判断是否是ajax请求
        if request.method == 'POST':
            num1 = request.POST.get('num1')
            num2 = request.POST.get('num2')
            res = int(num1) + int(num2)
            return HttpResponse(res)
    return render(request, 'index.html', locals())

示例2

当用户填写了用户名后，把光标移开后，会自动向服务器发送异步请求。服务器返回这个用户名是否已经被注册过。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
用户名：<input type="text" id="username"><span style="color: red"></span>
</body>
<script>
    $('#username').onblur('input', function () {
        $.ajax({
            url: '',  // 不写默认就是当前页面所在地址
            type: 'post',  // 指定当前请求方式
            data: {
                'username': $(this).val(),
            },  // 请求携带的数据
            success: function (args) {  // 异步回调函数，后端有回复自动触发
                $('span').text(args)
            },
        })
    })
</script>
</html>

view.py

from django.shortcuts import render, HttpResponse, redirect
from django.views.decorators.csrf import csrf_exempt
@csrf_exempt
def index(request):
    name_list = ['kevin', 'jerry', 'tom']
    if request.is_ajax():  # 判断是否是ajax请求
        if request.method == 'POST':
            name = request.POST.get('username')
            if name in name_list:
                return HttpResponse("用户已经存在")
            else:
                return HttpResponse('')
    return render(request, 'index.html', locals())

前后端传输数据编码格式

Django针对不同编码方式对应的数据格式会采用不同的处理策略

Django之AJAX - 图1

form表单默认发送的编码格式

Content-Type: application/x-www-form-urlencoded

数据格式：username=kevin&password=admin123

Django后端会自动处理到：request.POST

form表单发送文件的编码格式（需要在form表单添加**entype="multipart/form-data"**）

Content-Type: multipart/form-data

数据格式：隐藏看不到

Django后端会自动处理：request.POST request.FILES

Ajax默认的编码格式

Content-Type: application/x-www-form-urlencoded

数据格式：username=kevin&password=admin123

Django后端会自动处理到：request.POST

回调机制处理策略

使用Ajax交互所有的操作都不再直接影响整个页面（局部操作）返回的一定是HttpResponse

Ajax发送json格式数据

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<button id="btn">发生json格式数据</button>
</body>
<script>
    $('#btn').click(function (){
        $.ajax({
            url:'',
            type:'post',  // 不写默认get请求
            contentType:'application/json',  // 不写默认是urlencoded编码
            data:JSON.stringify({'name':'kevin','pwd':'admin123'}),  // 序列化方法
            success:function (arg){
            }
        })
    })
</script>
</html>

view.py

from django.shortcuts import render, HttpResponse, redirect
from django.views.decorators.csrf import csrf_exempt
@csrf_exempt
def index(request):
    if request.is_ajax():
        if request.method == 'POST':
            import json
            json_dict = json.loads(request.body)  # json.loads方法自带解析功能
            print(json_dict)
    return render(request, 'index.html', locals())

补充

Ajax发送的数据类型一定要跟数据的编码格式一致
Django后端对json格式的数据在request.body，并不会做任何处理，需要自行处理
form表单无法发送json格式数据的！！！

Ajax携带文件数据

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<input type="text" id="name">
<input type="file" id="file">
<button id="btn">发送Ajax请求</button>
</body>
<script>
    $('#btn').click(function () {
        // 利用js内置对象FormData
        let myFormData = new FormData();
        // 对象添加普通数据
        myFormData.append('username', $('#name').val())
        // 对象添加文件数据
        myFormData.append('my_file', $('#file')[0].files[0])
        // 发送ajax请求
        $.ajax({
            url: '',
            type: 'post',
            data: myFormData,
            // 携带文件必须要指定的两个参数
            contentType: false,
            processData: false,
            success:function (arg){
                // 处理异步回调返回的结果
            }
        })
    })
</script>
</html>

view.py

from django.shortcuts import render, HttpResponse, redirect
from django.views.decorators.csrf import csrf_exempt
@csrf_exempt
def index(request):
    if request.is_ajax():
        if request.method == 'POST':
            username = request.POST.get('username')
            file = request.FILES.get('my_file')
            with open(f'{username}_{file.name}', 'wb') as f:
                for line in file:
                    f.write(line)
    return render(request, 'index.html', locals())