目录
Ajax组件
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。ajax不是一门新的技术，而是一种使用现有标准的新方法。它本身又很多版本，我们目前学习的是jQuery版本（版本无所谓，本质一样就可以）。
功能简介：异步提交 局部刷新
优点：
不重新加载整个页面的情况下，可以跟服务器交换数据并更新部分网页内容。（客户是感觉不到的），只需要用户允许JavaScript在浏览器上执行。
1.AJAX使用JavaScript技术向服务器发送异步请求；
2.AJAX请求无需刷新整个页面
3.因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以AJAX性能高；
4.两个关键点：异步请求，局部刷新
常见的场景
搜索引擎会根据用户输入的关键字，自动提示检索关键字。其实这里就使用了AJAX技术！当文件框发生了输入变化时，使用AJAX技术向服务器发送一个请求，然后服务器会把查询到的结果响应给浏览器，最后再把后端返回的结果展示出来。
这注册过程页面时没有刷新的，只是刷新页面中我们鼠标点击的局部位置，当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应。
基本语法
//2.给按钮绑定点击事件
$('#subBtn').click(function(){
//1.先获取两个框里面的数据
let v1Val=$('#d1').val();
let v2Val=$('#d2').val();
console.log(v1Val,v2Val)
//发送ajax请求
$.ajax({
url:'', //后端地址，三种填写方式，与form标签得action一致
type:'post', //请求方式，默认也是get
data:{'v1':viVal,'v2':v2Val}, // 发送数据
success:function(args){
// 后端返回结果之后自动触发args接收后端返回得数据
$('#d3').val(args) }
})
})
使用ajax交互 那么后端返回的数据会被args接收 不再直接影响整个浏览器页面
后端
直接获取v1,v2,进行逻辑运算
Content-Type(数据编码格式)
1.urlencoded
ajax默认的编码格式、form表单默认也是
数据格式：xxx=yyy&uuu=ooo&aaa=kkk
dajango后端会自动处理到request.POST中
2.formdata
django后端针对普通的键值对还是处理到request.POST中，但是针对文件会处理到request.Field中
3.application/json
form表单不支持 ajax可以
<script>
$('#d1').click(function)(){
$.ajax({
url:'',
type:'post',
data:JSON.stringify({'name':'kimi','age':18}),//千万要写真实的数据
contentType:'application/json',
success:funcion (args){
alert(args)
}
})
}
</script>
后端需要从request.body 中获取并自己处理json.loads(request.body),json自带解码功能
form表单只支持urlencoded和formdata两个数据格式，但ajax支持三种数据格式（urlencoded、formdata和application/json)。
ajax发送json格式数据
1.确保发送json对应的数据是json格式字符串
data:JSON.stringify({})
2.修改数据编码格式(默认是urlencoded)
contentType:'application/json'
ajax携带文件数据
<script>
$('#d3').click(function(){
//1.先产生一个FormData对象
let myFormDataObj= new FormData();
//2.往该对象中添加普通数据
myFormDataObj.append('name','kimi');
myFormDataObj.append('age','18');
//3.往该对象中添加文件数据
myFormDataObj.append('file',$('#d2')[0].files[0])
//4.发送ajax请求
$.ajax({
url:'',
type:'post',
data:myFormDataObj,//ajax发送文件固定的两个配置
contentType:false, //不用编码，django认识内置对象
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,'username':'大家都会阳的':'hobby':'哎呀'}
后端将字典序列化为json格式
1.use_data = json.dumps(user_dict)
2.from django.http import JsonResponse
return JsonResponse(user_dict)
前端反序列化
1.前端正常序列化
let userObj = JSON.parse(args);
console.log(userObj)
console.log(userObj.username)
2.直接打印就行,前端认识JsonResponse
console.log(args)
console.log(args)
ajax自动反序列化后端的json格式的bytes类型数据
dataType:'json', //在ajax里面添加这个参数，无论你怎么序列化字典，都能识别出它是字典