Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
总结为:异步提交 局部刷新
注:使用Ajax的前提为导入了jQuery
Ajax的基本用法
$.ajax(
**指定朝哪个后端发送ajax请求**
url:' '(如果为空向本地址发送)
**请求方式**
type:''(如果为空默认为get)
**数据**
data:''(传输数据)
**回调函数:当后端给你返回结果的时候会自动触发 args接受后端的返回结果**
success:function (args){
执行结果
}
)
注:
针对后端如果是用HttpResponse返回的数据 回调函数不会自动帮你反序列化
如果后端直接用的是JsonResponse返回的数据 回调函数会自动帮你反序列化
使用HttpResponse序列化的解决方式
1.自己在前端利用JSON.parse()
2.在ajax里面配置一个参数
前后端传输数据的编码格式(contentType)
在此不写出验证!只有结果
无论是form表单还是ajax,它们前后传输数据的编码格式都为urlencoded
数据格式为:属性值=属性名&属性值=属性名&……
唯一不同的点在于form无法传输json格式而ajax是可以传输的,具体的判断方法可以使用request.POST看看是否有json格式传入!
ajax传入json格式
前端
$.ajax({
url:'',
type:'post',
data:JSON.stringify({'username':'jason','age':25}),
contentType:'application/json', // 指定编码格式
success:function () {
}
})
后端
if request.is_ajax():(判断当前请求是否为ajax请求)
json_str=request.body.decode('utf-8') (request.body为接受ajax数据的对象)
json_dict=json.loads(json_str)
以下为简略版本
if request.is_ajax():(判断当前请求是否为ajax请求)
json_str=request.body
json_dict=json.loads(json_str)(在json.load中传入二进制会自动解码反序列化)
**
注:
ajax发送json格式数据需要注意
1.contentType参数指定成:application/json
2.数据是真正的json格式数据
3.django后端不会帮你处理json格式数据需要你自己去request.body获取并处理
**
ajax发送文件
ajax中有一个内置对象FormData 这是专门用来处理文件发送的
前端
// 1 需要先利用FormData内置对象
let formDateObj = new FormData();
// 2 添加普通的键值对
formDateObj.append('username',$('#d1').val());
formDateObj.append('password',$('#d2').val());
// 3 添加文件对象
formDateObj.append('myfile',$('#d3')[0].files[0])
// 4 将对象基于ajax发送给后端
$.ajax({
url:'',
type:'post',
data:formDateObj, // 直接将对象放在data后面即可
// ajax发送文件必须要指定的两个参数
contentType:false, // 不需使用任何编码 django后端能够自动识别formdata对象
processData:false, // 告诉你的浏览器不要对你的数据进行任何处理
success:function (args) {
}
})
后端
if request.is_ajax():
if request.method == 'POST':
print(request.POST)
print(request.FILES)
**
注意与总结:
1.需要利用内置对象FormData
// 2 添加普通的键值对(可选)
formDateObj.append(‘username’,KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲d1').val()); fo…(’#d2’).val());
// 3 添加文件对象
formDateObj.append(‘myfile’,$(’#d3’)[0].files[0])
2.需要指定两个关键性的参数
contentType:false, // 不需使用任何编码 django后端能够自动识别formdata对象
processData:false, // 告诉你的浏览器不要对你的数据进行任何处理
3.django后端能够直接识别到formdata对象并且能够将内部的普通键值自动解析并封装到request.POST中 文件数据自动解析并封装到request.FILES中
**