Django与Ajax
Ajax
异步提交，局部刷新
ajax不是一门新的技术并且有很多版本，我们目前学习的是jquery版
一、Ajax简介
1.什么是ajax
Ajax即Asynchronous Javascript And XML 也就是异步 JavaScript和 XML
- 异步：和同步对应
- JavaScript：通过JavaScript来操作，发送请求到服务端
- XML：数据交互使用XML，现在主流使用JSON格式
- 局部刷新：JS的DOM操作
即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）
2.同步与异步
- 同步交互：客户端发出一个请求后，需要等待服务器响应接受后，才能发出第二个请求
- 异步交互：客户端发出一个请求后，不需要等待服务器响应结束，就可以发出第二个请求
3.XML格式与JSON格式
XML格式：
<name>duoduo</name>
<age>18</age>
JSON格式：
{
"name":"duoduo",
"age":"18",
}
对比：
| 格式 | 可阅读性 | 解析难度 | 空间占用 |
|---|---|---|---|
| XML | 高 | 复杂 | 大 |
| JSON | 高 | 简单 | 小 |
二、基本语法
$.ajax({
url:'',
type:'post', // 请求方式 默认也是get
data:{'v1':v1Val, 'v2':v2Val},
success:function (args) {
后端响应的数据
// 成功后 触发，后端返回结果之后自动触发 args接收后端返回的数据
},
error:function () {
// 失败后 触发
}
})
-
url控制数据提交的地址有三种填写方式，与form标签的action一致
1）不填写--超当前地址提交
2）填写一个完整的网址--超完整网址提交
3）路由--超该路由提交
-
type控制数据提交的方式请求方式 默认也是get
-
data提交的数据发送的数据，以字典的形式发送
-
success异步回调函数args接收后端返回的数据使用ajax交互，后端返回的数据会被args接受，不再影响整个浏览器页面
如何发送ajax：
- 通过绑定点击事件
- input框监听事件
三、Content-Type参数
编码格式，类似于数据报头
1.urlencoded
ajax默认的编码格式、form表单默认的格式
数据格式 ：xxx=yyy&uuu=ooo&...
django后端会自动将urlencoded数据处理到request.POST/request.GET
2.form data
包括文件数据
django后端针对普通的键值对还是处理到request.POST中，但是针对文件会处理到request.FILES
3.Application/Json
ajax支持发送的数据
- 普通数据urlencoded
- form data
- Application/json
request.body 前端发送的数据都先放在body中，如果是普通数据发送给POST，如果是文件会将普通数据放到POST中，文件数据交给FILES中
而json格式的数据则不处理放在body中，后端自己处理json格式数据
-
发送Json格式数据
1.确保data对应的数据是json格式字符串
data：JSON.stringify({})
如果发送的是普通的字典，那么收到的数据会以xxx=yyy&aaa=bbb的形式展现，所以当以Json格式发送，浏览器则会有更好的渲染效果
2.修改数据编码格式(默认是)
<script>
$('#d1').click(function (){
$.ajax({
url:'',
type:'post',
data:JSON.stringify({'name':'jason','age':18}),
contentType:'application/json',
success:function (){
alert('多喝热水哦')
}
})
})
</script>
四、Ajax携带文件数据
-
1.
data换成文件对象 -
2.添加两个键值对
contentType:falseprocessData:false
<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.后端返回的三大方法都会被ajax接收，不再影响整个浏览器页面
选择和ajax交互，那么返回给后端的数据都会被ajax回调函数中的args形参接受
3.选择使用ajax数据
（1）JSON模块进行序列化
- 后端序列化
def ab_ajax_func(request):
if request.method == "POST":
user_dict = {"username": "duoduo", 'hobby': '你好吗'}
import json
json_data = json.dumps(user_dict)
return HttpResponse(json_data)
return render(request, 'ajaxtest.html')
通过自定义响应码，可以通过响应码的不同，在前端的ajax回调函数中做出不同的结果
- 前端反序列化
$('#d1').click(function(){
$.ajax({
url:'',
type:'post',
data:{'name':'duoduo'},
success:function (args){
console.log(args);
console.log(typeof args);
console.log(args.username);
let userObj = JSON.parse(args)
console.log(userObj);
console.log(typeof userObj);
console.log(userObj.username);
}
})
})
（2）JsonResponse
- 后端：通过
JsonResponse
def ab_ajax_func(request):
if request.method == "POST":
user_dict = {"username": "duoduo", 'hobby': '你好吗'}
return JsonResponse(user_dict)
return render(request, 'ajaxtest.html')
- 前端：加一个配置
dataType:'json'
$('#d1').click(function(){
$.ajax({
url:'',
type:'post',
data:{'name':'duoduo'},
dataType:'json',
success:function (args){
console.log(args);
console.log(typeof args);
console.log(args.username);
console.log(args.hobby);
}
})
})
