一、AJAX(重要)

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

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

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

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

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

Ajax是一门js的技术，基于原生js开发的，但是用原生的js写代码过于繁琐，因此在这里我们只通过jQuery实现

1.1 特性

异步提交

同步异步：描述的任务的提交方式
同步:提交任务之后原地等待任务的返回结果期间不干任何事儿
异步:提交任务之后不愿地等待直接执行下一行代码任务的返回通过回调机制

阻塞非阻塞：程序的运行状态

程序运行的三状态图
局部刷新

一个页面不是整体刷新而是页面的某个地方局部刷新

1.2 基本使用

注意：单独的AJAX当然看不出来任何效果，因此他需要和后端一起来说。

例子：展示一个前端页面，页面上有三个输入框，前两个框输入数字，点击按钮朝后端发请求，页面不刷新的情况下，完成数字的加法运算。

<input type="text" id="t1"> + <input type="text" id="t2"> = <input type="text" id="t3">
<p>
    <button id="b1">计算</button>
</p>

<script>
    // 绑定点击事件
    $("#b1").on("click",function () {
        // 绑定ajax事件，向后端发请求
        $.ajax({
            // 1.向哪个地址发请求
            url:"",// 专门用来控制朝后端提交数据的地址  不写默认就是朝当前地址提交

            // 2.发送什么类型的请求
            type:"post",

            // 3.要发送什么数据
            data:{"t1":$("#t1").val(),"t2":$("#t2").val(),"t3":$("#t3").val(),},

            // 4.异步提交的任务 需要通过回调函数来处理
            success:function (data) {   // data形参指代的就是异步提交的返回结果
                // 通过DOM操作将内容 渲染到标签内容上
                $('#t3').val(data) 
            }
        })
    })
</script>

'''AJAX前后端交互'''
def ajax(request):
    # 判断是否是ajax请求,布尔值
    if request.is_ajax():
        if request.method == "POST":
            '''
            如果请求文本的数据格式是：urlencoded
            Django就会将解析到的数据放到request.POST中
            '''
            print(request.POST)
            t1 = request.POST.get('t1')
            t2 = request.POST.get('t2')
            res = int(t1) + int(t2)
            return HttpResponse(res)
    return render(request,"ajax.html")

1.3 Ajax传json格式数据

django后端针对json格式的数据不会自动帮你解析，会直接原封不动的给你放到request.body中。

JavaScript中关于JSON对象和字符串转换的两个方法：

JSON.stringify(): 用于将 JavaScript 值转换为 JSON 字符串。
JSON.parse(): 用于将一个 JSON 字符串转换为 JavaScript 对象(json只认双引的字符串格式)

<input type="text" id="t1"> + <input type="text" id="t2"> = <input type="text" id="t3">
<p>
    <button id="b1">计算</button>
</p>

<script>
    // 绑定点击事件
    $("#b1").on("click",function () {
        // 绑定ajax事件，向后端发请求
        $.ajax({
            // 1.向哪个地址发请求
            url:"",// 专门用来控制朝后端提交数据的地址  不写默认就是朝当前地址提交

            // 2.发送什么类型的请求
            type:"post",

            // 设置文本数据格式类型，默认是urlencoded
            contentType:'application/json', // 设置数据格式为json

            // 3.要发送什么数据
            {#data:{"t1":$("#t1").val(),"t2":$("#t2").val(),"t3":$("#t3").val(),},#}    // 普通格式数据

            // json格式数据
            data: JSON.stringify({"t1":$("#t1").val(),"t2":$("#t2").val(),"t3":$("#t3").val(),}),

            // 4.异步提交的任务 需要通过回调函数来处理
            success:function (data) {   // data形参指代的就是异步提交的返回结果
                // 通过DOM操作将内容 渲染到标签内容上
                $('#t3').val(data)
            }
        })
    })
</script>

'''AJAX前后端交互'''
def ajax(request):
    # 判断是否是ajax请求,布尔值
    if request.is_ajax():
        if request.method == "POST":
            '''
            如果请求文本的数据格式是：json
            Django不会解析，会直接原封不动的放到 request.body
            需要你自己去反序列化
            '''
            print(request.POST)   # 空
            print(request.body)   # byte类型数据
            # 序列化request.body得到字典
            data_json = json.loads(request.body)    # 字典
            t1 = data_json.get('t1')
            t2 = data_json.get('t2')
            res = int(t1) + int(t2)
            return HttpResponse(res)
    return render(request,"ajax.html")

注意点

        1.指定contentType参数
            contentType:'application/json',
        2.要将你发送的数据 确保是json格式的
            data:JSON.stringify({'username':'jason','password':'123'})

1.4 AJAX传文件

需要利用内置对象 Formdata提交文件，该对象既可以传普通的键值也可以传文件
ajax传文件一定要指定两个关键性的参数
- contentType:false,
- processData:false,

<input type="text" name="username" id="t1">
<input type="text" name="password" id="t2">
<input type="file" name="myfile" id="t3">
<button id="b1">提交</button>

<script>
    $("#b1").on("click",function () {
        // 1.实例化FormData对象
        var myFormData = new FormData();

        // 2.朝对象中添加普通的键值
        myFormData.append('username',$("#t1").val());   // 必须是 key value
        myFormData.append('password',$("#t2").val());   // 必须是 key value

        // 3.朝对象中添加文件数据
                // 1.先找到该标签
                // 2.转换成js对象
                // 3.通过js对象的方法 files ，获取文件内容 [0]
        myFormData.append("myfile",$("#t3")[0].files[0]);   // 必须是key value
        $.ajax({
            url:"",
            type:"post",
            // 数据，一定放对象
            data:myFormData,
            // ajax传文件 一定要指定两个关键性的参数
            contentType:false,  // 不用任何编码 因为FormData对象自带编码
            processData:false,  // 告诉浏览器不要处理我的数据 直接发就行
            // 回调函数,data是接收的参数
            success:function (data) {
                alert(data)
            }
        })
    })
</script>

'''AJAX传文件'''
def ajax_file(request):
    # 判断是否是ajax请求,布尔值
    if request.is_ajax():
        if request.method == "POST":
            print(request.POST)     # 这里还是正常传递过来的数据
            print(request.FILES)    # 但是这里就是一个文件对象
            user = request.POST.get("username")
            pwd = request.POST.get("password")
            myfile = request.POST.get("myfile")
            print(user,pwd,myfile)
            return HttpResponse('收到啦')

    return render(request,"ajax_file.html")

ajax传文件需要注意的事项

1.利用formdata对象 能够简单的快速传输数据 (普通键值 + 文件)
2.有几个参数主要注意
	data:FormData对象

	contentType:false
	processData:false

二、contentType前后端传输数据编码格式

form表单默认的提交数据的编码格式是urlencoded

urlencoded

username=admin&password=123这种就是符合urlencoded数据格式

django后端针对username=admin&password=123的urlencoded数据格式会自动解析
将结果打包给request.POST 用户只需要从request.POST即可获取对应信息

formdata

django后端针对formdata格式类型数据 也会自动解析
但是不会放到request.POST中而是给你放到了request.FILES中

ajax默认的提交数据的编码格式也是urlencoded

总结

django后端针对不同的编码格式数据会有不同的处理机制以及不同的获取该数据的方法

前后端在做数据交互的时候，一定一定要表明你所发的的数据到底是什么格式。

你的数据是什么格式 你就应该准确无误告诉别人是什么格式，你不能骗人家

三、ajax + sweetalert

点击下载Bootstrap-sweetalert项目。

<script>
    $("#submit").on("click",function () {
        $.ajax({
            url:"",
            type:"post",
            data:{"user":$("#login_btn").val(),"pwd":$("#pwd_btn").val(),},
            success:function (data) {
                if (data.code==1000){
                    swal(data.msg, "", "success");
                }else{
                    swal(data.msg, "", "error");
                }
            }
        })
    });
</script>

 '''登陆校验'''
    
            if userobj:
                if userobj.password == pwd:
                    user_info["user"] = user
                    
                    '''ajax + sweetalert'''
                    back_dic['code'] = 1000
                    back_dic['msg'] = '登陆成功'
                    return JsonResponse(back_dic)
                else:
                    '''ajax + sweetalert'''
                    back_dic['code'] = 2000
                    back_dic['msg'] = '账号或密码错误'
                    return JsonResponse(back_dic)
            else:
                '''ajax + sweetalert'''
                back_dic['code'] = 2000
                back_dic['msg'] = '用户不存在'
                return JsonResponse(back_dic)