Django与Ajax

Ajax异步提交

        AJAX翻译成中文就是“异步的Javascript和XML”，就是使用Javascript语言与服务器进行异步交互，传输的数据为XML（不只是XML），AJAX最大优点是在不重新加载整个页面的情况下可以与服务器交换数据并更新部分网页内容

1.什么是同步与异步交互

∙  同步交互：客户端发出一个请求后需要等待服务器响应结束后才能发出第二个请求

∙  异步交互：客户端发出一个请求后无需等待服务器响应结束就可以发第二个请求

        Ajax异步提交 局部刷新，用案例来讲就是当你在注册的时候很多网址在你输入用户名时就会判断当前用户是否已经注册但是网页并没有朝后端发送请求这就是Ajax的异步提交

// 基础语法格式
 
$.ajax({
    url:'', // 控制数据提交的地址不写就是当前服务器地址
    type:'', // 控制请求方式默认为get请求
    data:{},  // 组织提交的数据
    success:function(形参){
        // 异步回调函数
    }
})

2.AJAX的优点

        ∙  AJAX使用JavaScript技术向服务器发送异步请求

        ∙  AJAX请求无须刷新整个页面

        ∙  因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以AJAX性能高

        ∙  两个关键点:1.局部刷新 2.异步请求

前后端数据编码格式

1.数据格式：urlencoded        

        Ajax编码默认格式是urlencoded，django后端对符合urlencoded编码格式的数据都会自动解析封装到request.POST中

# 数据格式：
    name = 'hahaha'&age=66

2.数据格式：formdata

        Ajax发送文件需要借助js内置对象FormData，点击按钮后朝后端发送普通建值对和文件数据，django后端会自动将文件数据处理到request.FILES将普通数据处理到request.POST

3.数据格式：application/json

        django针对json格式的数据不会做任何的处理，数据传到后端后会以bytes的形式存放在request.body中需要自己添加参数来处理

# 语法格式
    data:JSON.stringify({'name':'hahaha','pwd':123}),
    contentType:'application/json', # 处理json格式数据

4.携带文件数据

        通过Ajax向后端发送文件数据，语法格式

$('#d1').click(function(){
    //1.产生内置对象
    let formData = new FormData();
    //2.添加普通数据
    formData.append('username',$('#d2').val())
    //3.添加文件数据 如果是多个文件数据不用加索引
    formData.append('file',$('#d3')[0].files[0])
    //4.发送ajax请求
    $.ajax({
        url:'',
        type:'post',
        data:formData,
        contentType:false,    // 不使用任何编码
        processData:false,    // 不处理数据对象
        success:function(args){
 
        }
    })
})

5.回调函数

        后端跟ajax交互 不应该再返回页面通常情况下都是返回json格式数据，前端针对HttpResponse和JsonResponse返回的json格式数据处理策略不同

        JsonResponse：会自动反序列化

        HttpResponse：不会自动序列化 需要添加固定参数 dataType:'JSON'才可以

序列化

        当后端想直接将实例化出来的数据对象直接发送给客户端那么这个时候就可以用Django给我们提供的序列化方式：Django内置的serializers

def ser(request):
    # 获取用户表里面的所有的用户对象
    user_list = moddels.User.objects.all()
    # 导入内置序列化模块
    from django.core import serializers
    # 调用该模块下的方法，第一个参数是指定以什么方式序列化数据
    ret = serializers.serialize('json',user_list)
    return HttpResponse(res)