Ajax

Ajax简介

异步提交
局部刷新

朝发送请求的方式
1.浏览器地址栏直接输入url回车                     GET请求
2.a标签href属性                             　　　　   GET请求
3.form表单                                 　　　　　　GET请求/POST请求
4.ajax 　　                             　　　　　　   GET请求/POST请求

 

AJAX 不是新的编程语言，而是一种使用现有标准的新方法(比较装饰器)

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

 

小例子

页面上有三个input框
　　在前两个框中输入数字 点击按钮 朝后端发送ajax请求
　　后端计算出结果 再返回给前端动态展示的到第三个input框中
　　(整个过程页面不准有刷新,也不能在前端计算)

 

js代码

 

$('#btn').click(function () {
        // 朝后端发送ajax请求
        $.ajax({
            // 1.指定朝哪个后端发送ajax请求
            url:'', // 不写就是朝当前地址提交
            // 2.请求方式
            type:'post',  // 不指定默认就是get 都是小写
            // 3.数据
            {#data:{'username':'jason','password':123},#}
            data:{'i1':$('#d1').val(),'i2':$('#d2').val()},
            // 4.回调函数:当后端给你返回结果的时候会自动触发 args接受后端的返回结果
            success:function (args) {
                {#alert(args)  // 通过DOM操作动态渲染到第三个input里面#}
                {#$('#d3').val(args)#}
                console.log(typeof args)

            }
        })
    })

小结

 

当你在利用ajax进行前后端交互的时候
后端无论返回什么都只会被回调函数接受 而不再影响这个浏览器页面了

结论:写ajax的时候 你可以直接将dataType参数加上 以防万一 或者后端就用JsonResonse

 

前后端传输数据的编码格式(contentType)

　　主要研究post请求数据的编码格式

• get请求数据就是直接放在url后面的
• url?username=jason&password=123

可以朝后端发送post请求的方式
1.form表单
2.ajax请求

 

前后端传输数据的编码格式
urlencoded

formdata

json

研究form表单

• 默认的数据编码格式是urlencoded
• 数据格式:username=jason&password=123
• django后端针对符合urlencoded编码格式的数据都会自动帮你解析封装到request.POST中
• username=jason&password=123 >>> request.POST
• 如果你把编码格式改成formdata，那么针对普通的键值对还是解析到request.POST中而将文件解析到request.FILES中
• form表单是没有办法发送json格式数据的

 

研究ajax

• 默认的编码格式也是urlencoded
• 数据格式:username=jason&age=20
• django后端针对符合urlencoded编码格式的数据都会自动帮你解析封装到request.POST中
• username=jason&age=20 >>> request.POST

 

ajax发送json格式数据

• django针对json格式的数据 不会做任何的处理
• request对象方法补充
• request.is_ajax()
• 判断当前请求是否是ajax请求 返回布尔值

js代码

 

    $('#d1').click(function () {
        $.ajax({
            url:'',
            type:'post',
            data:JSON.stringify({'username':'jason','age':25}),
            contentType:'application/json',  // 指定编码格式
            success:function () {
            }
        })
    })

 

后端　　

 

第一种方式
　　　　　json_bytes = request.body
        json_str = json_bytes.decode('utf-8')
        json_dict = json.loads(json_str)
第二种
        # json.loads括号内如果传入了一个二进制格式的数据那么内部自动解码再反序列化
        json_dict = json.loads(json_bytes)

 

ajax发送json格式数据需要注意点

• 1.contentType参数指定成:application/json
  2.数据是真正的json格式数据
  3.django后端不会帮你处理json格式数据需要你自己去request.body获取并处理

ajax发送文件

 

ajax发送文件需要借助于js内置对象FormData

 

    // 点击按钮朝后端发送普通键值对和文件数据
    $('#d4').on('click',function () {
        // 1 需要先利用FormData内置对象
        let formDateObj = new FormData();
        // 2 添加普通的键值对
        formDateObj.append('username',$('#d1').val());
        formDateObj.append('password',$('#d2').val());
        // 3 添加文件对象
        formDateObj.append('myfile',$('#d3')[0].files[0])
        // 4 将对象基于ajax发送给后端
        $.ajax({
            url:'',
            type:'post',
            data:formDateObj,  // 直接将对象放在data后面即可

            // ajax发送文件必须要指定的两个参数
            contentType:false,  // 不需使用任何编码 django后端能够自动识别formdata对象
            processData:false,  // 告诉你的浏览器不要对你的数据进行任何处理

            success:function (args) {
            }
        })
    })

　　后端接收

 

def ab_file(request):
    if request.is_ajax():
        if request.method == 'POST':
            print(request.POST)
            print(request.FILES)
    return render(request,'ab_file.html')

 

　　总结

 

 

	1.需要利用内置对象FormData
		// 2 添加普通的键值对
        formDateObj.append('username',$('#d1').val());
        formDateObj.append('password',$('#d2').val());
        // 3 添加文件对象
        formDateObj.append('myfile',$('#d3')[0].files[0])
	2.需要指定两个关键性的参数
		contentType:false,  // 不需使用任何编码 django后端能够自动识别formdata对象
        processData:false,  // 告诉你的浏览器不要对你的数据进行任何处理
	3.django后端能够直接识别到formdata对象并且能够将内部的普通键值自动解析并封装到request.POST中 文件数据自动解析并封装到request.FILES中

 

django自带的序列化组件(drf做铺垫)

import json
from django.http import JsonResponse
from django.core import serializers
def ab_ser(request):
    user_queryset = models.User.objects.all()
    # [{},{},{},{},{}]
    user_list = []
    for user_obj in user_queryset:
        tmp = {
            'pk':user_obj.pk,
            'username':user_obj.username,
            'age':user_obj.age,
            'gender':user_obj.get_gender_display()
        }
        user_list.append(tmp)
    方式1
    return JsonResponse(user_list,safe=False)
    方式2
    return render(request,'ab_ser.html',locals())
    方式3
    # 序列化
    res = serializers.serialize('json',user_queryset)
    """会自动帮你将数据变成json格式的字符串 并且内部非常的全面"""
    return HttpResponse(res)

 

ajax结合sweetalert进行3二次确认

 

   $('.del').on('click',function () {
        // 先将当前标签对象存储起来
        let currentBtn = $(this);
        // 二次确认弹框
        swal({
          title: "你确定要删吗?",
          text: "你可要考虑清除哦，可能需要拎包跑路哦!",
          type: "warning",
          showCancelButton: true,
          confirmButtonClass: "btn-danger",
          confirmButtonText: "是的，老子就要删!",
          cancelButtonText: "算了,算了!",
          closeOnConfirm: false,
          closeOnCancel: false,
          showLoaderOnConfirm: true
        },
        function(isConfirm) {
          if (isConfirm) {
                // 朝后端发送ajax请求删除数据之后 再弹下面的提示框
                $.ajax({
                    {#url:'' + currentBtn.attr('delete_id'),  // 1 传递主键值方式1#}
                    url:'/delete/user/',  // 2 放在请求体里面
                    type:'post',
                    data:{'delete_id':currentBtn.attr('delete_id')},
                    success:function (args) {  // args = {'code':'','msg':''}
                        // 判断响应状态码 然后做不同的处理
                        if(args.code === 1000){
                            swal("删了!", args.msg, "success");
                            // 1.lowb版本 直接刷新当前页面
                            {#window.location.reload()#}
                            // 2.利用DOM操作 动态刷新
                            currentBtn.parent().parent().remove()
                        }else{
                            swal('完了','出现了位置的错误','info')
                        }
                    }

                })

          } else {
            swal("怂逼", "不要说我认识你", "error");
          }
        });
    })