Ajax
Ajax
异步提交 局部刷新
ajax不是一门新的技术并且有很多版本 我们目前学习的是jQuery版本(版本无所谓 本质一样就可以)
基本语法
"注意 获取数据值应放在事件内部"
$('#d2').blur(function () {
// 1.先获取两个框里面的数据
let v1Val = $('#d1').val();
let v2Val = $('#d2').val();
// 3.发送ajax请求
$.ajax({
url:'', // 后端地址 三种填写方式 与form标签的action一致
type:'post', // 请求方式 默认也是get
data:{'v1':v1Val, 'v2':v2Val}, // 发送的数据
success:function (args) { // 后端返回结果之后自动触发 args接收后端返回的数据
$('#d3').val(args)
}
})
})
| 参数 | 含义 | 值 |
|---|---|---|
| url | 发送请求给这个网址 | ""|"/路由"|"完整网址" |
| type | 请求方式，默认get | 有除get、post外的其他方式 |
| contentType | 数据编码格式 | 默认urlencoded，后续又详细讲解 |
| data | 提交给后端的数据 | 根据不同的content-type数据形式也不同 |
| success | 当请求成功被响应时执行 | 异步回调函数，可以接收响应体中的数据 |
Content-Type 数据编码格式
1.urlencoded /视图中获取 request.POST
ajax默认与form表单的编码格式
数据格式 xxx=yyy&uuu=ooo&aaa=kkk
django后端会自动处理到request.POST中
2.formdata /视图中获取 request.FILES
django后端针对普通的键值对还是处理到request.POST中
针对文件会处理到request.FILES中
3.application/json /视图中获取 request.body # 发送json格式数据
form表单不支持jaon格式 ajax可以
<script>
$('#d1').click(function () {
$.ajax({
url:'',
type:'post',
data:JSON.stringify({'name':'jason','age':18}), // 必须添加JSON.stringify 不要直接写个字典骗人
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发出 返回值是 True 或false"
2.后端三板斧返回的数据都会被args接收而不是影响整个页面。
3.选择使用ajax做前后端交互，后端一般返回的都是字典数据
user_dict = {'code':'10000','name':'liaji','age':18}
我们直接返回一个字典数据到前端还需要通过json模块json.dumps来序列化。发送到前端。
前端还需要使用JSON.parse 来反序列化， ajax 有一个属性添加后会自动帮助我们处理好JSON格式的数据对象
dataType:'json',
$.ajax({
url:'',
type:'post',
data:'',
dataType:'json',
success:function (args){
console.log(args)
}
})
属性添加完成后无论我们从后端自己使用json模块处理还是JsonResponse来处理后传在前端都可以帮助我们封装成一个json格式的数据对象，通过.的方式就能拿出数据
