AJAX

Posted 2020-11-26 Agsol

JSON

json 指的是javascript对象表示法(JavaScript object notation)

使用JavaScript语法来描述数据对象,又可以独立于语言和平台.

对应关系

JavaScript	Python
stringify	dumps
parse	loads

Ajax

AJAX(asynchronous JavaScript and XML) 异步的JavaScript和xml

最大优点就是在不重新加载整个页面的情况下,可以于服务器交换数据并更新部分网页内容.

AJAX不需要任何浏览器插件,只需要用户允许JavaScript在浏览器上执行.

复习:

同步交互:客户端发出一个请求后,需要等待服务器响应后,才可以发出第二个请求.

异步交互:客户端发出一个请求后,无需等待服务器响应,就可以发出第二个请求.

xml

可扩展标记语言

基本语法

<script>
    $.ajax({
        url:'',  // 数据提交的后端地址,不写就是往当前页面提交,也可以写后缀,也可以写全称,跟actions一样
        type:'post',  // 提交方式  默认是get请求
        data:{'i1':$('#d1').val(),'i2':$('#d2').val()},  // 提交的数据
        success:function (data) {  // 形参data就是异步提交之后后端返回结果
        $('#d3').val(data)  // 回调机制需要做的事情
        }
    })
</script>

一旦使用ajax,redirect,HttpResponse,rendent都不再作用于页面,而是与ajax中的data交互

form表达发送数据的编码方式

1.form表单默认的编码方式是urlencoded
Content-Type: application/x-www-form-urlencoded
    urlencoded所对应的数据格式
        username=jason&password=123
        django后端针对urlencoded数据 会自动解析并且帮你封装到request.POST中

2.form表单发送文件 编码格式 multipart/form-data
Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryhjKCHQHDmcE62iMQ
针对formdata格式的数据 你在浏览器上是无法查看到

3.form表单无法发送json格式的数据  你要想法 你只能借助于ajax

注意

django后端只要你的数据满足urlencoded格式
username=jason&password=123
就会自动帮你解析到request.POST中
如果你是一个文件对象django后端也会自动识别帮你放到request.FILES中

ajax发送数据的编码方式

1.ajax默认的编码方式 urlencoded
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
ajax默认的编码格式也是urlencoded 也就意味着后端django也是将数据解析到request.POST中
2.ajax发送文件
借助于内置对象  new
该对象即可以携带文件数据 同样也支持普通的键值对
$('#d1').click(function () {
    // 先生成一个内置对象
    var MyFormData = new FormData();
    // 1. 先添加普通的键值
    MyFormData.append('username','jason');  // 添加了一组普通的简直对
    MyFormData.append('password','123');
    // 2. 添加文件数据
    MyFormData.append('myfile',$('#d2')[0].files[0]);  // 如何获取input框中文件对象$('#d1')[0].files[0]
    $.ajax({
        url:'',
        type:'post',
        data:MyFormData,  #1

        // 发送文件必须要指定的两个参数
        contentType:false,  //不适用任何编码MyFormData对象内部自带编码 django后端能够识别  #2
        processData:false,  // 不要处理数据  #3

        success:function (data) {

        }

    })
})
3.ajax传输json格式数据
Content-Type: application/json
{"username":"jason","password":"123"}
django后端针对json格式的数据 不会做任何处理 数据怎么来的 只会原封不动的放到request.body中需要你自己手动处理
    $('#d1').click(function () {
    $.ajax({
        url:'',
        type:'post',
        contentType:'application/json',  # 1.注意点1
        data:JSON.stringify({'username':'jason','password':'123'}),  # 2.注意点2
        success:function (data) {
            alert(123)
        }
    })
})

序列化

目的:将数据整合成一个大号字典的形式,方便数据的交互.

drf django restframework

from app01 import models
from django.core import serializers
# 序列化目的  将数据整合成一个大字典形式 方便数据的交互
def zzz(request):
    user_queryset = models.User.objects.all()
    # [{username:...,password:...,hobby:...,},{},{},{}]
    # user_list = []
    # for data in user_queryset:
    #     user_list.append(
    #         {'username':data.username,
    #          'password':data.password,
    #          'gender':data.get_gender_display(),
    #
    #          }
    #     )
    res = serializers.serialize('json',user_queryset)//使用序列化模块完成上面功能
    return HttpResponse(res)
>>>
[{"model": "app01.user", "pk": 1, "fields": {"username": "jason", "password": 123, "gender": 1}}, {"model": "app01.user", "pk": 2, "fields": {"username": "egon", "password": 321, "gender": 2}}, {"model": "app01.user", "pk": 3, "fields": {"username": "tank", "password": 444, "gender": 3}}, {"model": "app01.user", "pk": 4, "fields": {"username": "oscar", "password": 666, "gender": 4}}]

格式化网站:bejson 格式化校验之后:

[{
    "model": "app01.user",
    "pk": 1,
    "fields": {
        "username": "jason",
        "password": 123,
        "gender": 1
    }
}, {
    "model": "app01.user",
    "pk": 2,
    "fields": {
        "username": "egon",
        "password": 321,
        "gender": 2
    }
}, {
    "model": "app01.user",
    "pk": 3,
    "fields": {
        "username": "tank",
        "password": 444,
        "gender": 3
    }
}, {
    "model": "app01.user",
    "pk": 4,
    "fields": {
        "username": "oscar",
        "password": 666,
        "gender": 4
    }
}]