Ajax简述---快速增量式响应

Ajax

Ajax的简介及用法

Ajax是指异步JS和XML,使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面,这使得程序能够更快地回应用户的操作。

Ajax有很多版本,这里介绍的是jQuery版本的:

// 基本语法
$.ajax({
    url:'',  // 后端地址 三种填写方式 与form标签的action一致
    type:'post',  // 请求方式 默认也是get
    data:{'v1':v1Val, 'v2':v2Val},  // 发送的数据
    contentType: "urlencoded"  // 默认值是这个
    success:function (args) {  // 后端返回结果之后自动触发 args接收后端返回的数据
        $('#d3').val(args)
    }
})

后端依旧需要按照响应HttpResponse对象。

参数 含义
url 发送请求给这个网址 ""|"/路由"|"完整网址"
type 请求方式,默认get 有除get、post外的其他方式
contentType 数据编码格式 默认urlencoded,后续又详细讲解
data 提交给后端的数据 根据不同的content-type数据形式也不同
success 当请求成功被响应时执行 异步回调函数,可以接收响应体中的数据

contentType属性

urlencoded

ajax默认的编码格式、form表单默认也是这种编码格式,数据组织格式为xxx=yyy&uuu=ooo&aaa=kkk

在请求方式为post时,django会将其处理好后存储到request.POST中,通过get、getlist取值。

formdata

django后端针对普通的键值对还是处理到request.POST中 但是针对文件会处理到request.FILES中。

application/json

这是form表单所不支持的数据编码,ajax可以传输序列化后的json数据,发送给后端,并且不做处理,放在request.body中。后端每个语言都有自己的处理方式。

携带文件数据设置

携带文件数据,contentType属性需要设置为false,直接传入FormData对象。

通过这种方式提交的普通数据依旧在POST中,文件数据在FILES中。

<script>
    $('#d3').click(function () {
        // 1.先产生一个FormData对象
        let myFormDataObj = new FormData();
        // 2.往该对象中添加普通数据
        myFormDataObj.append('name', 'jason');
        myFormDataObj.append('age', 18);
        // 3.往该对象中添加文件数据
        myFormDataObj.append('file', $('#d2')[0].files[0])
        // 4.发送ajax请求
        $.ajax({
            url:'',
            type:'post',
            data:myFormDataObj,
            // ajax发送文件固定的两个配置
            contentType:false,
            processData:false,
            success:function (args){
                alert(args)
            }
        })
    })
</script>

数据交互格式

我们很多时候后端与前端的交流并不随便的发送各种形式的字符串,所以对于success后回调函数所接收的参数,我们一般要求是json格式的数据,并且大多是一个大字典的格式,其中可能嵌套多个字典(对应js中的自定义对象)。

那么django后端的视图函数针对ajax请求,是可以做一些识别的,针对ajax请求,django也会有些针对性的操作。

  1. request.is_ajax()

    request对象判断是否是ajax请求并返回bool

  2. 在视图函数的return的httpResponse对象只会局部的影响界面,最终效果由回调函数决定

  3. 在应对ajax请求,我们应该在视图函数中判断,如果是ajax请求,就包装一些字典数据并通过json响应,将数据发送给回调函数的参数。

def index(request):
    if request.is_ajax():
        from django.http import JsonResponse
        return JsonResponse({组织好的字典})
    return render(request,"html文件")

ps:我们通过json响应返回的数据除了将我们的字典序列化,还可以告知前端,这个数据不需要这个是json数据,放心反序列化,前端就会自动的反序列化,作为前端工程师就可以直接使用了。*

django内置序列化组件(drf前身)

我们已经知道前后端分离的项目,其前后端的数据交互通常是通过json格式数据,而django中我们所取出的数据列表却是QuerySet形式的,如果不通过模板语法,我们是没有办法直接在前端页面使用的。

我们当然可以自己进行写循环代码,拿出所有的字段的数据将其转换成字典。但是这么机械重复的事情,肯定已经被解决了,我们可以直接用django提供的内置序列化组件就可以将queryset对象封装为字典。

# 导入内置序列化模块
from django.core import serializers
# 调用该模块下的方法,第一个参数是你想以什么样的方式序列化你的数据
res = serializers.serialize('json', book_queryset)
return HttpResponse(res)
posted @ 2023-06-26 18:10  wwwxxx123  阅读(19)  评论(0编辑  收藏  举报