django—ajax
1、什么是ajax
异步的Javascript和XML
即使用Javascript与服务器异步交互，传输XML数据
特点:
异步交互：异步提交数据到服务器，并执行回调函数
局部刷新：即在不刷新页面的情况下，实现局部页面与服务器的交互
2、ajax语法结构
1、ajax有多种实现方式，我们学习基于JQuery封装的ajax
2、基于JQuery封装的ajax，必须先导入JQuery
语法结构：
$.ajax({
url:'', // 数据提交的后端地址，同form表单的actions属性
type:'', // 提交数据的请求方式，如get,post等
data:{}, // key:value键值对，key为自定义的字符串，value是要提交的数据，通过JQuery语法取值
success:function (data) {} // ajax回调函数
})
3、数据编码格式
数据格式与编码格式是不同的概念，我们应做到两者一致
3.1 前后端传输数据的编码格式
1、浏览器与服务器交互数据的编码格式Content_Type
urlencoded : 如username=jason&password=123
fomadata ：
application/json
2、针对不同的数据，后端进行不同的处理
文件类型的数据，会被封装到FILES中，后端通过request.FILES可获取数据
其他数据，会被封装到对应的请求中，如post请求，后端通过request.POST获取数据
json数据，后端不会做任何处理，通过request.body可以获取json数据
3.2 form表单发送数据的编码格式
1、form表单默认的编码格式是urlencoded
2、通过form表单发送文件，编码格式是Content-Type: multipart/form-data;
3、无法通过form表单发送json数据，只能借助于ajax
3.3 ajax发送数据的编码格式
可发送的数据编码格式
urlencoded
formdata
application/json
默认编码格式
urlencoded
4、基于ajax发送JSON数据
要点：
1、指定编码格式为application/json
2、将数据序列化为json串，保证与编码格式一致(前端的序列化JSON)
3、后端处理json格式的数据，不会做任何处理，原封不动的封装到request.body中、
示例：
// 此处学习的是JQuery封装的ajax
// 提交按钮标签的id设置为d1
$('#d1').click(function () {
$.ajax({
url:'',
type:'post',
data:JSON.stringify({'username':'aaa','password':'123'})
success:function (data) {
alert('提交成功')
}
})
});
5、基于ajax发送文件数据
1、借助于内置对象new FormData()
2、该对象可以携带文件数据，也可以传键值对
3、在ajax中指定两个参数：
contentType:false 代表不使用任何编码格式，FormData()实例化的对象内部自带编码，django后端能够识别
processData:false 代表不对数据本身做任何处理
示例：
// 设置input框的id为d2
$('#d1').click(function () {
var MyFormData = new FormData();
MyFormData.append('username':'aaa'); // 传普通数据是键值对，而不是字典
MyFormData.append('myfile',$('#d2')[0].files[0]);
$.ajax({
url:'',
type:'post',
data:MyFormData,
contentType:false,
processData:false,
})
});
6、后端序列化数据
序列化目的：
将数据整合成一个大字典形式，再传给前端，方便数据的交互
一般用于前后端分离开发
后端代码：
drf django restframework
from app01 import models
from django.core import serializers
# 以视图函数index为例
def index(request):
user_request = models.User.objects.all()
res = serializers.serialize('aaa',user_request)
return HttpResponse(res)
# res是一个字典套字典{{},{},{},{}...}
# 每一个数据表中的记录作为一个字典
# 前端接收到的只有所有的字典，没有最外层的字典
7、ajax结合sweetalert实现删除按钮的提示功能
7.1 前端
1、下载插件：Bootstrap-sweetalert
2、只需要用到其中的dist文件，在前端导入即可（配置static动态绑定）
3、sweetalert的swal用于提示
示例：
<!--index.html-->
<!--js代码-->
<script>
$('.delete').click(function () {
var $btn = $(this);
swal({
title: "你确定要删吗?",
text: "你如果删了，你就准备好直接跑路吧!",
type: "warning",
showCancelButton: true,
confirmButtonClass: "btn-danger",
confirmButtonText: "是的，老子就要删!",
cancelButtonText: "算了算了，不敢!",
closeOnConfirm: false,
closeOnCancel: false,
showLoaderOnConfirm: true
},
function (isConfirm) {
if (isConfirm) {
// 朝后端发送ajax请求
console.log(isConfirm);
$.ajax({
url: '',
type: 'post',
data: {'delete_id': $btn.attr('deleteId')},
success: function (data) {
if (data.code == 0) {
swal("准备跑路把!", data.msg, "success");
// 通过DOM操作 来直接操作标签
$btn.parent().parent().remove()
} else {
swal("有Bug", "发什么了未知的错误!", "warning");
}
}
});
} else {
swal("怂逼", "数据都不敢删", "error");
}
});
})
</script>
代码中的注意点：
1、给可删除的标签添加类delete，绑定事件click
2、下面是编写事件程序的注意点：
通过$(this)得到当前标签
3、要回传当前数据的id给服务器，通过设置标签自定义属性deleteId={{obj.id}}
4、通过$(this).attr('deleteId')获取要删除的数据id
5、通过DOM操作，实现局部的数据交互更新，但整个页面并不刷新
7.2 后端
def index(request):
if request.is_ajax():
back_dic = {'code': 0, 'msg': ''}
delete_id = request.POST.get('delete_id')
time.sleep(2)
models.User.objects.filter(pk=delete_id).delete()
back_dic['msg'] = '数据已经被我删掉了'
return JsonResponse(back_dic)
user_queryset = models.User.objects.all()
return render(request,'index.html',locals())
注意点：
发送数据格式为JsonResponse，
