标签：res request json Django Ajax data ajax 数据

一什么是Ajax
二 Ajax语法
三案例
- 1.通过Ajax，实现前端输入两个数字，服务器做加法，返回到前端页面
- 2.前端反序列化的不同方式
四前后端传输数据的编码格式(理论)
五 form表单提交数据的编码格式
- 1.form表单默认提交的是urlencoded
- 2.数据编码格式是form-data(multipart/form-data)
六 ajax提交数据的编码格式
八 Django自带的serialize组件(了解)

一什么是Ajax

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。

html: a img h p div  # 标签名字是不能更改的
xml: <abc></abc>  <username>kevin</username>  # 标签名字是可以自己写的(微信支付中使用的就是xml)

Ajax的特点：

异步传输：指的是数据的传输方式是异步的
局部刷新：浏览器页面局部刷新的
例子：github的注册功能，实时验证邮箱的合法性，每次输完邮箱，就朝后端发起一次请求。

ajax技术是属于前端的技术，并且它不是一个新的技术栈，它是由其他的技术栈演变过来的(类似于python的装饰器)。对于ajax 的学习我们只学习jQuery封装之后的，原生的ajax(原生的ajax分4步骤)我们不学，过于复杂了。所以，我们要想使用ajax技术，必须确保引入jQuery文件，否则不能使用。

二 Ajax语法

$.ajax({
    //1. 指定请求的地址
    url:'', 

    // 2. 指定请求方式
    type:'post', 

    // 3. 指定参数，对象形式
    data:{'d1':d1, 'd2':d2},

    // 4. 接收django后端返回过来的数据，回调函数
    success:function (res) {
        // res：当django后端成功返回结果的时候，会把结果给res
        console.log(res);
    }
})

解析：

ajax({对象形式})
url参数：是指定请求地址
2.1 不写，默认朝当前地址提交.
2.2 写路由地址，eg：url:'/ab_ajax/',
type参数：指定请求方式，使用小写
3.1 默认不写是get请求
data参数：指定ajax的参数，使用对象形式
success参数：回调函数，用于接收django后端返回过来的数据

基于jquery的Ajax实现

<button class="send_Ajax">send_Ajax</button>
<script>

       $(".send_Ajax").click(function(){

           $.ajax({
               url:"/handle_Ajax/",
               type:"POST",
               data:{username:"Yuan",password:123},
               success:function(data){
                   console.log(data)
               },
         　　　　　　
               error: function (jqXHR, textStatus, err) {
                        console.log(arguments);
                    },

               complete: function (jqXHR, textStatus) {
                        console.log(textStatus);
                },

               statusCode: {
                    '403': function (jqXHR, textStatus, err) {
                          console.log(arguments);
                     },

                    '400': function (jqXHR, textStatus, err) {
                        console.log(arguments);
                    }
                }

           })

       })

</script>

三案例

1.通过Ajax，实现前端输入两个数字，服务器做加法，返回到前端页面

要求：
1. 不能刷新整个页面
2. 不能使用js计算，
3. 必须结合python来做，计算的功能要用python来计算，python把结果返回给前端，前端再把结果放到对应的位置。

views.py 后端:

def ab_ajax(request):
    # 1.如何判断是ajax请求
    if request.is_ajax():  # True就表示是ajax请求
        print('是ajax')
        '''ajax以post请求发送数据，在django后端还用request.POST来接收'''
        print(request.POST)  # <QueryDict: {'d1': ['1'], 'd2': ['2']}>
        # 2.取出query对象的两个值
        d1 = request.POST.get('d1')  # str类型
        d2 = request.POST.get('d2')  # str类型

        # 3.计算d3
        # d1和d2是字符串类型，不能直接使用加号相加
        d3 = int(d1) + int(d2)
        # 4.把d3的结果返回到前端
        return HttpResponse(d3)
    return render(request, 'ab_ajax.html')

前端html页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax案例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<input type="text" id="d1">
+
<input type="text" id="d2">
=
<input type="text" id="d3">
<button class="btn">计算</button>

{#写js，拿到输入框中的值，传给后端#}
<script>
    // 1.给计算绑定事件
    $('.btn').click(function(){
        // 2.获取两个输入框中的值，用val()
        var d1 = $('#d1').val();
        var d2 = $('#d2').val();

        // 3.把参数提交到django后端，做计算：用ajax提交
        $.ajax({
            // 3.1 指定请求的地址
            url:'',  // 不写，默认朝当前地址提交
            // 3.2 指定请求方式
            type:'post',
            // 3.3 指定往后端传输的参数，对象形式
            data:{'d1':d1, 'd2': d2},
            // 3.4 接收django后端返回过来的数据，回调函数
            success: function(res){
                // res:当django后端成功返回结果的时候，会把结果给res
                console.log(res);  // 能够接收HttpResponse(d3)

                // 4.把后端传输过来的d3的值放到第三个输入框中
                $('#d3').val(res);
            }
        })
    })
</script>
</body>
</html>

2.前端反序列化的不同方式

后端往前端发送序列化数据，前端是怎么反序列化的呢？

方式1：前端js反序列化

views.py:

def ab_ajax(request):
    if request.is_ajax():
        # 返回字典
        user_dict = {'username': 'kevin', 'age': 20}
        # 序列化
        import json
        user_dict = json.dumps(user_dict)
        return HttpResponse(user_dict)  # HttpResponse括号内的都是字符串
    return render(request, 'ab_ajax.html')

html的script标签：

<script>
    // 给按钮绑定事件
    $('.btn').click(function(){
        $.ajax({
            // 1. 指定请求的地址
            url:'',  // 不写，默认朝当前地址提交
            // 2. 指定请求方式
            type:'post',
            // 3. 指定往后端传输的参数，对象形式
            data:{},
            // 4. 接收django后端返回过来的数据，回调函数
            success: function(res){
                // res:当django后端成功返回结果的时候，会把结果给res
                // 能够接收HttpResponse(d3)
                console.log(res);  // {"username": "kevin", "age": 20}
                console.log(typeof res);  // string

                // 反序列化
                res = JSON.parse(res);
                console.log(res, typeof res);  //{username: 'kevin', age: 20} 'object'
                // 可以取出字典中的数据了
                console.log(res.username);
                console.log(res.age);
            }
        })
    })
</script>

方式2：ajax设置dataType参数

views.py:

def ab_ajax(request):
    if request.is_ajax():
        # 返回字典
        user_dict = {'username': 'kevin', 'age': 20}
        # 序列化
        import json
        user_dict = json.dumps(user_dict)
        return HttpResponse(user_dict)  # HttpResponse括号内的都是字符串
    return render(request, 'ab_ajax.html')

html的script标签：

<script>
    // 给按钮绑定事件
    $('.btn').click(function(){
        $.ajax({
            url:'',
            type:'post',
            data:{},

            // dataType参数: 是ajax固定你返回的就是对象的形式，就是反序列化之后的结果
            dataType: 'json',

            success: function(res){
                // res:当django后端成功返回结果的时候，会把结果给res
                console.log(res, typeof res);  //{username: 'kevin', age: 20} 'object'
            }
        })
    })
</script>

方式3：Django的序列化模块

views.py:

def ab_ajax(request):
    if request.is_ajax():
        # 返回字典
        user_dict = {'username': 'kevin', 'age': 20}
        # 用JsonResponse序列化
        from django.http import JsonResponse
        return JsonResponse(user_dict)
    return render(request, 'ab_ajax.html')

html的script标签：

<script>
    // 给按钮绑定事件
    $('.btn').click(function(){
        $.ajax({
            url:'',  
            type:'post',
            data:{},
            // 接收django后端返回过来的数据，回调函数
            success: function(res){
                console.log(res, typeof res);  //{username: 'kevin', age: 20} 'object'
                // 这样直接拿到的结果就是个对象，不需要再反序列化了
            }
        })
    })
</script>

总结

1. django后端如果使用HttpResponse。
    1.1 前端需要手动反序列化，没有指定dataType参数 ---> 方式1
    1.2 前端指定了dataType参数，就不用在反序列化了 ---> 方式2

2. django后端如果使用JsonResponse
    在前端直接使用，拿到的就是反序列化之后的结果---> 方式3

四前后端传输数据的编码格式(理论)

查看编码格式的参数：
Content-Type

1.application/x-www-form-urlencoded

这应该是最常见的 POST 提交数据的方式了。浏览器的原生
表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。请求类似于下面这样（无关的请求头在本文中都省略掉了）：

POST http://www.example.com HTTP/1.1
Content-Type: application/x-www-form-urlencoded;charset=utf-8

user=lqz&age=22

2.multipart/form-data

这又是一个常见的 POST 数据提交的方式。我们使用表单上传文件时，必须让表单的 enctype 等于 multipart/form-data。

POST http://www.example.com HTTP/1.1
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA

------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="user"

yuan
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png

PNG ... content of chrome.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

3.application/json

application/json 这个 Content-Type作为请求头，是用来告诉服务端消息主体是序列化后的 JSON 字符串。

能够提交json格式的数据的方式：
1. ajax
2. 第三方的工具：postman (测试时使用)

下面是具体的实例，我们只研究post请求方式

    我们只研究post请求的编码格式，get请求不再研究
    url?username=a&password=b，参数本身就在url后面，不用研究。

五 form表单提交数据的编码格式

form表单能够提交的编码有2种：urlencoded form-data。(json格式的数据form表单是没办法提交的)

1.form表单默认提交的是urlencoded

Content-Type: application/x-www-form-urlencoded
对于urlencoded格式的数据，django后端都会给封装到request.POST中
真实数据：username=dsdsa&password=dsdas
查看：Network --> 路由请求(index/) --> Payload --> view source

views.py后端：

def index(request):
    print(request.POST)  # <QueryDict: {'username': ['hahha'], 'password': ['123']}>
    return render(request, 'index.html')

index.html 前端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单提交urlencoded编码格式</title>

</head>
<body>
<form action="" method="post">
    username: <input type="text" name="username">
    password: <input type="password" name="password">
    <input type="submit">
</form>
</body>
</html>

2.数据编码格式是form-data(multipart/form-data)

这种格式可以提交普通数据，也可以提交文件数据了。

1.Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryyatnZXLCF04x4Dch  # 前面是form-data(普通数据)，后面是二进制形式(文件数据)
2.针对form-data格式的数据，django后端会把普通数据还是封装到rquest.POST中，对于文件数据封装到了request.FILES中了
3.真实数据：看下面的图片

views.py后端：

def index(request):
    print(request.POST)  # <QueryDict: {'username': ['jason'], 'password': ['123']}>
    print(request.FILES)  # <MultiValueDict: {'myfile': [<InMemoryUploadedFile: 2019080211050144.jpg (image/jpeg)>]}>
    return render(request, 'index.html')

index.html 前端：

<body>
<form action="" method="post" enctype="multipart/form-data">
    username: <input type="text" name="username">
    password: <input type="password" name="password">
    文件: <input type="file" name="myfile">
    <input type="submit">
</form>
</body>

六 ajax提交数据的编码格式

1.ajax默认提交的也是urlencoded

默认的提交格式是：Content-Type: application/x-www-form-urlencoded
django后端也是把数据都封装到了request.POST中

views.py后端：

def index(request):
    print(request.POST)  # <QueryDict: {'a': ['3'], 'b': ['7'], 'c': ['0']}>
    return render(request, 'index.html')

index.html 前端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax提交数据的编码格式</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<button class="btn">按钮</button>
<script>
    $('.btn').click(function(){
        $.ajax({
            url: '',
            type: 'post',
            data: {'a': 3, b: 7, c: 0},
            success: function(){

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

2.ajax提交json格式的数据

ajax要想提交json格式的数据，必须满足两个条件：
1. content-type必须是：json （因为默认是urlencoded）
2. 传输的数据必须是json格式的

# ajax提交的json格式数据，django后端没有把数据封装到request.POST中
'''
如何获取ajax提交的json格式数据?
	在Django后端使用request.body获取
'''

ajax提交json格式的数据:
1. 提交格式是：Content-Type: application/json
2. django后端把数据都封装到了request.body中
3. 真实数据：{"a":3,"b":7,"c":0}

views.py后端：

import json
def index(request):
    print(request.body)  # b'{"a":3,"b":7,"c":0}' --> 二进制类型
    json_bytes = request.body
    # 解码
    # 如果是二进制数据，可以省略解码这一步，但不建议省略
    json_str = json_bytes.decode('utf-8')  # {"a":3,"b":7,"c":0} <class 'str'>
    # 反序列化
    json_dict = json.loads(json_str)  # {'a': 3, 'b': 7, 'c': 0} <class 'dict'>
    print(json_dict, type(json_dict))
    return render(request, 'index.html')

index.html 前端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax提交json格式的数据</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<button class="btn">按钮</button>

<script>
    $('.btn').click(function(){
        $.ajax({
            url: '',
            type: 'post',
            // 序列化数据，前端使用JSON.stringify()
            data: JSON.stringify({'a': 3, b: 7, c: 0}),

            // 更改contentType
            contentType: 'application/json',

            success: function(){

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

3.ajax提交文件数据

FormData对象简介：用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。

步骤：

new自定义对象FormData()

    var myFormDataObj = new FormData();

获取数据
普通数据用val()获取，文件数据用$('#myfile')[0].files[0]获取
添加到myFormDataObj

    // 普通数据
    myFormDataObj.append('password', password);
    // 提交文件数据、
    myFormDataObj.append('myfile', myfile);

ajax中修改参数：

    contentType: false, // 告诉浏览器不要给我修改任何的编码格式
    processData:false,// 告诉浏览器不要对我的数据进行任何的修改或者干扰

在django后端
普通数据还是在request.POST中，文件数据在request.FILES里面

views.py后端：

def index(request):
    if request.method == 'POST':
        print(request.POST)  # <QueryDict: {'username': ['kevin'], 'password': ['1234567']}>
        print(request.FILES)  # <MultiValueDict: {'myfile': [<InMemoryUploadedFile: 2019080211050144.jpg (image/jpeg)>]}>
    return render(request, 'index.html')

index.html 前端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax提交文件数据</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
username: <input type="text" id="username">
password: <input type="password" id="password">
文件: <input type="file" id="myfile">
<button class="btn">按钮</button>

<script>
    $('.btn').click(function () {
        // 2. 获取数据
        var username = $('#username').val()
        var password = $('#password').val()

        // console.log($('#myfile'))  // jqure对象  // S.fn.init(1)
        // console.log($('#myfile')[0])  // 标签对象 // <input type="file" id="myfile">
        var myfile = $('#myfile')[0].files[0]  // 真实文件数据

        // 1. ajax提交文件数据，需要借助于form_data对象
        var myFormDataObj = new FormData();

        // 3.form_data对象增加数据
        // myFormDataObj.append(name, value)
        myFormDataObj.append('username', username);
        // myFormDataObj.append('username', $('#username').val());
        myFormDataObj.append('password', password);

        // 提交文件数据
        myFormDataObj.append('myfile', myfile);

        // 4.ajax提交前端数据
        $.ajax({
            url: '',
            type: 'post',
            data: myFormDataObj,

            // 5.需要加两个参数
            contentType: false,  // 告诉浏览器不要给我修改任何的编码格式
            processData: false,  // 告诉浏览器不要对我的数据进行任何的修改或者干扰

            success: function () {
            }
        })
    })
</script>
</body>
</html>

七 ajax结合layer弹窗实现删除的二次确认

学会如何使用第三方工具------->去看人家写的文档，根据文档把工具学会使用就行

第三方layer:
layer文档：https://layuiweb.com/demo/layer.html

layer官网：https://layuiweb.com/layer/index.htm

views.py

def ab_layer(request):
    return render(request, 'ab_layer.html')


from app01 import models
from django.http import JsonResponse

def delete(request):
    # 3.遇到ajax的固定格式
    back_dic = {'code': 200, 'msg': '删除成功'}
    """
    ajax请求，需要给用户返回一个结果，就有一个固定格式
    固定字典中：
        code:状态码
        msg:返回的信息
    """
    # 1.获取ajax提交到后端的数据id值
    id = request.POST.get('id')

    # 4.测试加载图标
    import time
    time.sleep(5)

    # 2.删除数据库中相应的数据
    models.Book.objects.filter(pk=id).delete()
    return JsonResponse(back_dic)

ab_layer.html 前端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax结合layer弹窗实现删除的二次确认</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"></script>
    <script src="/static/layer/layer.js"></script>
</head>
<body>
{# 删除数据时的隐藏id标签 #}
{# value使用{{  }}来动态获取 #}
<input type="hidden" value="1" id="d1">
<button class="btn">删除</button>
</body>
<script>
    // layer.msg('hello')  // 用于测试文件是否引入成功

    // 1.给按钮绑定事件
    $('.btn').click(function () {
        // 3.获取数据，id值
        var id = $('#d1').val();
        // 6.设置全部变量index
        var index = null;

        // 2.询问框
        layer.confirm('您确定要删除此用户吗？', {
            btn: ['确认删除'] //按钮
        }, function () {
            // 3. 点击确认删除按钮触发的动作，添加ajax
            {#layer.msg('的确很重要', {icon: 1});#}

            $.ajax({
                url: '/delete/',
                type: 'post',
                // 删除数据时，需要传id值
                data: {id: id},

                // 4. 没有返回前会出现前出现一个转动的loading小图标或者“内容加载中..”，用来告知用户正在请求数据。这个就可以用beforeSend方法来实现
                beforeSend: function () {
                    // loading层
                    index = layer.load(1, {
                        shade: [0.1, '#fff'] //0.1透明度的白色背景
                    });
                },

                success: function(res){
                    // 5. 当删除数据成功后，关闭loading层
                    // 局部变量不能通用，解决：把index变成全局变量
                    layer.close(index)

                    // res:是前端返回的字典数据
                    if (res.code == 200) {
                        layer.msg(res.msg)
                    }
                }
            })
        });
    })
</script>
</html>

八 Django自带的serialize组件(了解)

把对象序列化成json字符串

例子：让你从数据库总查询几条数据，然后序列化给到前端，以列表套字典的形式[{},{},{}]

方式1：自己组装成列表套字典形式，循环赋值添加到空列表中
views.py

def ab_ser(request):
    # 查询数据
    user_list = models.Book.objects.all()
    # user_list是QuerySet对象，可以使用列表套字典的形式取值，但它本质上并不是列表套字典
    # print(user_list)  # <QuerySet [<Book: Book object (2)>, <Book: Book object (3)>, <Book: Book object (4)>]>

    # 2.自己组装成列表套字典的形式
    book_list = []
    # 3.循环内部数据，重新一个一个赋值后，再组装
    for obj in user_list:  # obj就是内部的一个个对象
        tmp = {  # 组装成新的字典
            'pk': obj.pk,
            'username': obj.username,
        }
        book_list.append(tmp)  # 把新的字典添加到空列表中

    return JsonResponse(book_list, safe=False)  # JsonResponse不能序列化列表，需要加safe=False参数

"""
结果是：
[{"pk": 2, "username": "tank"}, {"pk": 3, "username": "kevin"}, {"pk": 4, "username": "jerry"}]
"""

方式2：使用Django自带的serialize组件

from django.core import serializers
def ab_ser(request):
    # 1.查询数据
    user_list = models.Book.objects.all()
    # user_list是QuerySet对象，可以使用列表套字典的形式取值，但它本质上并不是列表套字典
    # print(user_list)  # <QuerySet [<Book: Book object (2)>, <Book: Book object (3)>, <Book: Book object (4)>]>

    # 2.使用serialize组件
    book_list = serializers.serialize('json', user_list)  # 了解
    return JsonResponse(book_list, safe=False)

"""
结果是：
"[{\"model\": \"app01.book\", \"pk\": 2, \"fields\": {\"username\": \"tank\"}}, {\"model\": \"app01.book\", \"pk\": 3, \"fields\": {\"username\": \"kevin\"}}, {\"model\": \"app01.book\", \"pk\": 4, \"fields\": {\"username\": \"jerry\"}}]"
"""

json在线解析网站：https://www.json.cn/

标签：res,request,json,Django,Ajax,data,ajax,数据
From： https://www.cnblogs.com/zjyao/p/17378291.html

Django与Ajax

一什么是Ajax

二 Ajax语法

三案例

1.通过Ajax，实现前端输入两个数字，服务器做加法，返回到前端页面

2.前端反序列化的不同方式

方式1：前端js反序列化

方式2：ajax设置dataType参数

方式3：Django的序列化模块

四前后端传输数据的编码格式(理论)

1.application/x-www-form-urlencoded

2.multipart/form-data

3.application/json

五 form表单提交数据的编码格式

1.form表单默认提交的是urlencoded

2.数据编码格式是form-data(multipart/form-data)

六 ajax提交数据的编码格式

1.ajax默认提交的也是urlencoded

2.ajax提交json格式的数据

3.ajax提交文件数据

七 ajax结合layer弹窗实现删除的二次确认

八 Django自带的serialize组件(了解)

相关文章

赞助商

阅读排行

Django与Ajax

一 什么是Ajax

二 Ajax语法

三 案例

1.通过Ajax，实现前端输入两个数字，服务器做加法，返回到前端页面

2.前端反序列化的不同方式

方式1：前端js反序列化

方式2：ajax设置dataType参数

方式3：Django的序列化模块

四 前后端传输数据的编码格式(理论)

1.application/x-www-form-urlencoded

2.multipart/form-data

3.application/json

五 form表单提交数据的编码格式

1.form表单默认提交的是urlencoded

2.数据编码格式是form-data(multipart/form-data)

六 ajax提交数据的编码格式

1.ajax默认提交的也是urlencoded

2.ajax提交json格式的数据

3.ajax提交文件数据

七 ajax结合layer弹窗实现删除的二次确认

八 Django自带的serialize组件(了解)

相关文章

赞助商

阅读排行

一什么是Ajax

三案例

四前后端传输数据的编码格式(理论)