Django组件之Ajax请求

2023-01-01 18:14:55 来源：博客园

(相关资料图)

Django组件之Ajax请求
- 一、定义
- 二、基本语法
- 三、Content_Type
- 四、Ajax携带文件数据
- 五、Ajax补充说明

Django组件之Ajax请求

一、定义

"异步提交 局部刷新"Ajax不是一门新的技术并且有很多版本 学习用的是jQuery版本版本无所谓本质一样就可以

二、基本语法

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

三、Content_Type

1.urlencodedajax默认的编码格式、form表单默认也是数据格式  xxx=yyy&uuu=ooo&aaa=kkk django后端会自动处理到request.POST中    2.formdatadjango后端针对普通的键值对还是处理到request.POST中 但是针对文件会处理到request.FILES中    3.application/jsonform表单不支持 ajax可以<script>    $("#d1").click(function () {        $.ajax({            url:"",            type:"post",            data:JSON.stringify({"name":"jason","age":18}),  // 数据要符合指定的类型 要言行一致哦            contentType:"application/json",            success:function (args) {                alert(args)            }        })    })</script>后端需要从request.body中获取并自己处理

四、Ajax携带文件数据

<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>

五、Ajax补充说明

主要是针对回调函数args接收到的响应数据1.后端request.is_ajax()  # 用于判断当前请求是否由ajax发出2.后端返回的三板斧都会被args接收不再影响整个浏览器页面3.选择使用ajax做前后端交互的时候 后端一般返回的都是字典数据user_dict = {"code": 10000, "username": "小阳人", "hobby": "哎呦喂~"} ajax自动反序列化后端的json格式的bytes类型数据dataType:"json",

关键词：文件数据补充说明添加文件