Ajax简介
数据传输编码格式的解析
- form表单发送三种数据格式的情况
- ajax发送数据的编码格式
  - 默认的编码格式也是urlencoded
  - ajax传输json格式数据
Ajax传输文件数据
django内置序列化模块

Ajax简介

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

ajax是异步提交的

Ajax 不是新的编程语言，而是一种使用现有标准的新方法。

Ajax 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

举个实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<input type="text" id="t1"> + <input type="text" id="t2"> = <input type="text" id="t3">
<p>
    <button id="b1">计算</button>
</p>
<script>
    $('#b1').on('click', function () {
        $.ajax({

            url:'',    // 数据提交的地址， 不写就是向当前页面提交，也可以写后缀，也可以写全称，与form表单参数action一样
            type: 'post',   // 提交方式，不写默认是get请求
            data: {'t1': $('#t1').val(), 't2':$('#t2').val()}, // 提交的数据
            success: function (data) {     // 形参data就是异步提交之后后端返回的结果
                $('#t3').val(data)
            }


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

数据传输编码格式的解析

前后端交互式一个数据编码格式，针对不同的数据，后端会进行不同的处理

三种格式：

urlencoded
formdata
application/json

form表单发送三种数据格式的情况

form表单post请求默认的编码格式是urlencoded

在浏览器-->检查-->network可以看到，我们form表单在提交数据的时候，有如下信息：

Request Headers：    # 请求头
Content-Type:application/x-www-form-urlencoded; charset=UTF-8   # 数据编码格式-urlencoded

Form Data：# 携带的数据
d1=23&d2=23

在我们后端django中针对urlencoded数据，会自动解析并封装到request.POST方法中

form表单发送文件

Request Headers：    # 请求头
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryhjKCHQHDmcE62iMQ  # 数据编码格式，-form-data

Form Data：#针对form-data格式的数据，在浏览器是无法查看的

发送到后端django，文件对象会自动解析到 request.POST 和 request.FILES 中，前者记录文件名，后者记录对象。

form表单无法发送json格式的数据，要想实现，只能借助ajax

ajax发送数据的编码格式

默认的编码格式也是urlencoded

ajax传输json格式数据

有个参数，contentType，不写默认是urlencoded，

在view.py中

import json

def home(request):
    if request.method == "POST":
        print(request.body)
        json_bytes = request.body
        print(json.loads(json_bytes), type(json.loads(json_bytes)))
        # 反序列化为python字典格式
    return render(request, 'form_test.html')


# 结果：
'''

b'{"d1":"cwz","d2":"123"}'
{'d1': 'cwz', 'd2': '123'} <class 'dict'>
'''

form_test.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<form action="" method="post">

    username: <input type="text" name="username" id="d1">
    password: <input type="text" name="password" id="d2">
</form>
<button id="d3">点我发送json格式</button>

<script>
    $('#d3').click(function () {
        $.ajax({
            url:'',
            type:'post',
            contentType:'application/json', //需要指定编码格式为json
            data:JSON.stringify({'d1':$('#d1').val(),'d2':$('#d2').val()}), // 需要前端发送JSON字符串，JSON。stringify序列化即可。
            success:function (data) {
                alert(123)
            }
        })
    })
</script>
</body>
</html>

ajax传json格式数据特点：

django后端针对json格式的数据不会自动帮你解析会直接原封不动的给你放到request.body中你可以手动处理获取数据。拿到request.body是一个bytes类型数据

Ajax传输文件数据

需要借助内置对象，该对象既可以携带文件数据，同样也支持普通的键值对

注意几个参数：

data：formdata对象
contentType：false
processData：false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
username:<input type="text" name="username">
password:<input type="text" name="password">
myfile:<input type="file" name="myfile" id="d1">
<button id="d2">点我发送文件</button>

<script>


    $('#d2').click(function () {
        // 先生成一个内置对象
        var MyFormData = new FormData();
        // 先添加普通的键值
        MyFormData.append('username', 'cwz');
        MyFormData.append('password', '123');
        //添加文件数据
        MyFormData.append('myfile', $('#d1')[0].files[0]);  // 将jquery对象转换成原生的js对象,利用原生js对象的方法 直接获取文件内容

        $.ajax({

            url: '',
            type: 'post',
            data: MyFormData,

            contentType: false,   //不用任何编码,因为formData对象自带编码 django能够识别该对象
            processData: false,   //告诉浏览器不要处理我的数据 直接发就行

            success: function (data) {
                
            }

        })
    })

</script>
</body>
</html>

django内置序列化模块

序列化的目的就是将数据整合成一个大字典

导入这个模块：from django.core import serializers

比自己用json转方便多了

from app01 import models
from django.core import serializers

def yyy(request):
    author_queryset = models.Author.objects.all()
    res = serializers.serialize('json', author_queryset)
    return HttpResponse(res)

效果：

[{
    "model": "app01.author",
    "pk": 1,
    "fields": {
        "name": "\u90b6\u98ce",
        "email": "123@qq.com",
        "author_detail": 1
    }
}, {
    "model": "app01.author",
    "pk": 2,
    "fields": {
        "name": "\u5f0f\u5fae",
        "email": "111@sin.com",
        "author_detail": 2
    }
}, {
    "model": "app01.author",
    "pk": 3,
    "fields": {
        "name": "\u65e0\u540d",
        "email": "100@qq.com",
        "author_detail": 3
    }
}]

来源：https://www.cnblogs.com/setcreed/p/11966539.html

标签

ajax