标签：请求 request json Django Ajax ajax POST 页面

什么是Ajax?

ajax 全名: async javascript and XML(异步JavaScript和XML)
是前后台交互的能⼒, 也就是我们客户端给服务端发送消息的⼯具，以及接受响应的⼯具
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
是⼀个默认异步执⾏机制的功能，AJAX分为同步（async = false）和异步（async = true）

什么是同步请求？(false)

1  同步请求是指当前发出请求后，浏览器什么都不能做，
2  必须得等到请求完成返回数据之后，才会执行后续的代码，
3  相当于生活中的排队，必须等待前一个人完成自己的事物，后一个人才能接着办。
4  也就是说，当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面处于一个假死状态，
5  当这个AJAX执行完毕后才会继续运行其他代码页面解除假死状态

什么是异步请求？(默认:true)

1 默认异步：异步请求就当发出请求的同时，浏览器可以继续做任何事，
2 Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。
3 一般默认值为true，异步。异步请求可以完全不影响用户的体验效果，
4 无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。

Ajax 的优势

AJAX使用JavaScript技术向服务器发送异步请求；
AJAX请求无须刷新整个页面；
因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以AJAX性能高；
两个关键点:1.局部刷新，2.异步请求

应用场景

搜索引擎根据用户输入的关键字，自动提示检索关键字。

还有一个很重要的应用场景就是注册时候的用户名的查重。

其实这里就使用了AJAX技术！当文件框发生了输入变化时，使用AJAX技术向服务器发送一个请求，然后服务器会把查询到的结果响应给浏览器，最后再把后端返回的结果展示出来。

整个过程中页面没有刷新，只是刷新页面中的局部位置而已！
当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应！

当输入用户名后，把光标移动到其他表单项上时，浏览器会使用Ajax技术向服务器发出请求，服务器会查询名为lemontree7777777的用户是否存在，最终服务器返回true表示名为lemontree7777777的用户已经存在了，浏览器在得到结果后显示“用户名已被注册！”。

整个过程中页面没有刷新，只是局部刷新了；
在请求发出后，浏览器不用等待服务器响应结果就可以进行其他操作；

Ajax 的操作流程

具体操作流程：

首先通过PHP页面将数据库中的数据取出
取出后转成json格式的字符串，后利用ajax把字符串返还给前台
再利用json.parse解析通过循环添加到页面上
那么反之，前端的数据可以利用ajax提交到后台
但是后台是没有办法直接把这些数据插入到数据库中，所以要先提交到PHP页面上
最后再由PHP将数据插入到数据库中

基本语法

$('#subBtn').click(function (){
        //发送ajax请求
        $.ajax({
            url:'',    //后端地址，三种填写方式，与form标签的action一致
            type:'post',    //请求方式，默认也是get
            data:{'v1':$('#d1').val(),'v2':$('#d2').val()},    //获取两个框里面的数据
            success:function (args){     //后端返回结果之后自动触发,args接收后端返回的数据
                $('#d3').val(args)
            }

        })
    })

示例：

# 路由层 urls.py 文件

from app01 import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('ab_ajax/',views.ab_ajax_func)

# 视图层 views.py 文件

from django.shortcuts import render, HttpResponse


def ab_ajax_func(request):
    if request.method == 'POST':
        print(request.POST)
        v1 = request.POST.get('v1')
        v2 = request.POST.get('v2')
        res = int(v1) + int(v2)
        return HttpResponse(res)
    return render(request, 'abAjaxPage.html')

# 模板层 abAjaxPage.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.1/jquery.js"></script>
</head>
<body>
<input type="text" id="d1"> + <input type="text" id="d2"> = <input type="text" id="d3">
<button id="subBtn">计算</button>


<script>
    //给按键绑定点击事件
    $('#subBtn').click(function (){
        //发送ajax请求
        $.ajax({
            url:'',    //后端地址，三种填写方式，与form标签的action一致
            type:'post',    //请求方式，默认也是get
            data:{'v1':$('#d1').val(),'v2':$('#d2').val()},    //获取两个框里面的数据
            success:function (args){     //后端返回结果之后自动触发,args接收后端返回的数据
                $('#d3').val(args)
            }

        })
    })
</script>
</body>
</html>

前后端数据传输的编码格式

1.前端中可以向后端发起post请求的方式

form 表单
ajax 请求

2.基于post请求, 前后端数据传输的主流编码格式有三种

urlencoded : 默认的编码格式, 提交的数据从request.POST中提取
form-data : 上传文件时使用的编码格式, 提交的数据从request.POST中提取, 上传的文件从request.FILES中提取
json : ajax发送的json格式数据, 在request.POST中取不到数据, 需要在request.body中提取数据

3.基于post请求, form表单传输数据默认的编码格式

默认编码格式为 : urlencoded
如果要上传文件需要在标签中指定 : enctype="multipart/form-data" 编码格式
数据格式 : username=alex&password=123
提交位置 : django后端针对符合urlencoded编码格式的数据都会自动帮你解析封装到request.POST中, 文件提交到request.FILES中

4.基于post请求, ajax传输数据默认编码格式

默认编码格式 : urlencoded
如果要上传文件需要使用 Formdata 对象
数据格式 : username=alex&password=123
提交位置 : django后端会自动帮你解析封装到request.POST中, 文件提交到request.FILES中

5.json.loads( )是否可以转Bytes格式

3.5之前不行, 需要我们手动将 Bytes 格式转成 str 类型, 然后再进行转换
3.6以后可以, Bytes无需手动转 str 类型, 它内部会自动帮你转成 str, 再转成 json
查看 json.loads( ) 的源码可以得到验证 :

Ajax发送数据

Ajax发送json格式数据

# 模板层：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>
<button id="d1">发送json格式数据</button>
<script>
    $('#d1').click(function (){
        $.ajax({
            url:'',
            type:'post',
            data:JSON.stringify({'name':'alex','age':18}),    # 告诉后端发送的是json格式数据
            contentType:'application/json',
            success:function (args){
                alert(args)
            }
        })
    })
</script>
</body>
</html>

# 视图层：

from django.shortcuts import render 

def ab_ajax_func(request):
    if request.method == 'POST':
        print(request.POST)    # <QueryDict: {}>
        print(request.FILES)    # <MultiValueDict: {}>
        print(request.body)    # b'{"name":"alex","age":18}'
        import json
        res = json.loads(request.body)   # json.loads（）自带解码功能
        print(res,type(res))    # {'name': 'alex', 'age': 18} <class 'dict'>
        request.JSON =res    # 也可以将处理好的数据自己进行封装
        print(request.JSON)    # {'name': 'alex', 'age': 18}
    return render(request, 'abAjaxPage.html')

Ajax发送文件数据