Django之Ajax

目录

• Django之Ajax
• Ajax
  • Ajax简介
  • Ajax常见应用场景
  • AJax的优缺点
  • Ajax基本语法结构
  • Ajax数据编码格式
  • Ajax发送文件
  • Ajax+sweetalert

Django之Ajax

Ajax

Ajax简介

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

• 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
• 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

Ajax常见应用场景

注册时，当文本框输入变化时，使用Ajax技术，向服务器发送一个请求，然后服务器会把查询到的结果响应给浏览器，最后再把后端返回的结果展示出来。

• 整个过程页面没有刷新，只是局部位置刷新而已。
• 当请求发出后，浏览器还可以简写其他操作，无需等待服务器响应！

AJax的优缺点

• Ajax使用JavaScript技术向服务器发送异步请求；
• Ajax请求无需刷新整个页面；

Ajax基本语法结构

$.ajax({
    url:'',#指定朝哪个后端地址发送请求 不写默认曹当前地址提交
    type:'post' #指定提交方式
    
    data:{'username':'jason','password':'123'}
    success:function(data){
        #data指代的就是后端返回的异步提交的结果
        #异步回调机制逻辑处理代码
    }
})

Ajax数据编码格式

ajax  默认的数据编码格式是urlencoded
        也就意味着ajax发送post请求django后端默认是通过request.POST获取数据
        
    ajax发送json格式数据
        如何查看前端提交数据的编码格式？
            在请求头中有一个content-Type参数
        """
        前后端交互数据的时候 一定要做到数据个编码格式的一致性
        """
        1.需要手动指定编码格式
            contentType:'application/json'
        2.一定要确保数据也是符合json格式的
            data:JSON.stringify({'username':'jason'})
        
        # django后端针对json格式的数据 是不会做任何处理的  会原封不动的放在request.body中
        你可以手动去处理获取数据
            
            1.将bytes类型转成json格式字符串
            2.利用json模块json.loads反序列化出来

Ajax发送文件

    ajax传输文件
        ajax传文件 需要使用到js内置对象  FormData
        该对象及可以携带普通的键值对 给django后端的request.POST也可以携带文件给django后端的request.FILES
        
        # 1.现生成一个formdata对象
        var MyFormData = new FormData();
        # 2.添加普通的键值对
        MyFormData.append('username','jason');
        MyFormData.append('password','123');
        # 3.添加文件
        var fileObj = $('#myfile')[0].files[0];
        MyFormData.append('myfile',fileObj)
        """
        如何获取type=file的input标签存储的用户上传文件
        """
        $.ajax({
            url:'',
            type:'post',
            data:MyFormData,
            # 需要手动指定两个关键性的参数
            contentType:false,
            processData:false,
            success:function(data){
                ...
            }
       
        })  

Ajax+sweetalert

$("#b55").click(function () {
    swal({
                title: "你确定要删除吗？",
                text: "删除可就找不回来了哦！",
                type: "warning",
                showCancelButton: true,  // 是否显示取消按钮
                confirmButtonClass: "btn-danger",  // 确认按钮的样式类
                confirmButtonText: "删除",  // 确认按钮文本
                cancelButtonText: "取消",  // 取消按钮文本
                closeOnConfirm: false,  // 点击确认按钮不关闭弹框
                showLoaderOnConfirm: true  // 显示正在删除的动画效果
            },
            function () {
                var deleteId = 2;
                $.ajax({
                    url: "/delete_book/",
                    type: "post",
                    data: {"id": deleteId},
                    success: function (data) {
                        if (data.code === 0) {
                            swal("删除成功!", "你可以准备跑路了！", "success");
                        } else {
                            swal("删除失败", "你可以再尝试一下！", "error")
                        }
                    }
                })
            });
})