Django10:Ajax介绍/发送数据/SweetAlert

Ajax

异步提交

局部刷新

发送方式
1. 浏览器输入url，按enter get

2.a标签href属性 get

3.form表单 get/post

4. ajax get/post

ajax 不是编程语言，是先有标准的新方法。

只学习jQuery封装之后的版本（不学原生）

    $(".del").on("click", function () {// 向后端发送删除的请求$.ajax({// 1.指定发送后端url: "/delete/",  //不写，就是当前地址//请求方式type: "post",  //不指定，默认get，都是小写// 数据data: {"id":delId},// 回调函数：返回结果时自动触发，args是后端返回的结果success:function (arg) {swal(arg, "你可以跑路了！", "success");$trEle.remove();});});})

后端

def index(request):if request.method == 'POST':back_dic = {'msg':'hahaha'}return HttpResponse(json.dumps(back_dic))  #  要自己手动反序列化return JsonResponse(back_dic)  # 前端能自动反序列化return render(request,'index.html')

ajax补充：
dataType:'JSON'如果使用HttpResponse ,会自动转换json格式

前后端交互的数据编码格式

form表单默认是urlencoded编码格式传输数据
urlencoded数据格式：username=jason&password=123django后端针对该格式的数据 会自动解析并帮你打包到request.POST中formdata数据格式：django后端针对符合urlencoded编码格式数据(普通键值对)还是统一解析到request.POST中而针对formdata文件数据就会自动解析放到request.FILES中application/jsondjango后端针对json格式数据 并不会做任何的处理而是直接放在request.body中

ajax发送数据

默认urlencoded编码格式

前后端数据交互编码格式与数据格式一定要一致
声明什么编码格式，就用传什么格式

ajax发送json格式

$('#d2').on('click',function () {$.ajax({url:'',type:'post',contentType:'application/json',  // 修改content-Type参数data:JSON.stringify({'username':'jason','password':123}),  // 将数据序列化成json格式字符串success:function (data) {alert(data)}})})

补充：request.is_ajax();判断是不是ajax请求

前端不会处理json格式的数据，而是直接塞进request.body中。我们自己处理json格式数据，拿到的是二进制json

def ab_ct(request):if request.method == 'POST':# 自己处理json格式数据json_bytes = request.body# 扩展 json.loads能够自动解码并序列化json_dict = json.loads(json_bytes)print(json_dict,type(json_dict))print(request.POST)print(request.FILES)return render(request,'ab_ct.html')

ajax发送json格式数据注意点

1.contentType:'application/json',

2. data 数据是真正的json数据

3.django后端不会处理json数据，需要手动request.body获取和处理

ajax发送文件

ajax发送文件(******)内置对象FormData即发普通键值对也发文件// ajax发送文件数据  需要借助于内置对象$('#d3').click(function () {// 1 需要先生成一个内置对象var myFormData = new FormData();// 2 传普通键值对  当普通键值对较多的时候 我们可以利用for循环来添加myFormData.append('username','jason');myFormData.append('password',123);// 3 传文件myFormData.append('myfile',$('#i1')[0].files[0]);  // 获取input框内部用户上传的文件对象// 发送ajax请求$.ajax({url:'',type:'post',data:myFormData,// 发送formdata对象需要指定两个关键性的参数processData:false,  // 让浏览器不要对你的数据进行任何的操作contentType:false,  // 不要使用任何编码格式 对象formdata自带编码格式并且django能够识别该对象success:function (data) {alert(data)}})})

SweetAlert

< script >
function Delete(obj) {var article_id = $(obj).attr("article_id"); {#console.log(article_id);#}swal({title: '确定删除吗？',text: '你将无法恢复它！',type: 'warning',showCancelButton: true,confirmButtonColor: '#d33',cancelButtonColor: '#3085d6',confirmButtonText: '确定！',}).then(function(value) {if (value.value) {$.ajax({url: "/JiaBlog/article/" + article_id + "/editor/delete/",type: 'POST',data: {csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),article_id: article_id,},success: function(result) {var status = result.result;if (status == 'success') {swal('删除成功！', '你的文件已经被删除。', 'success');} else {swal('出错啦。。。', "error"); //后端删除失败}setTimeout(function() {window.location.reload()},1000);}})} else {swal('已取消！', '', 'error')}})
}< /script>/

参考：

https://www.cnblogs.com/guyouyin123/p/12173020.html

https://blog.csdn.net/ssjdoudou/article/details/90727543