Django

Ajax

Ajax 即 Asynchronous Javascript And XML（异步JavaScript和XML）

AJAX 是一种用于创建快速动态网页的技术。

AJAX 通过在后台与服务器进行少量数据交换，使网页实现异步更新。这意味着可以在不重载整个页面的情况下，对网页的某些部分进行更新。

AJAX 基于因特网标准，并使用以下技术组合：

• XMLHttpRequest 对象（与服务器异步交互数据）
• JavaScript/DOM（显示/取回信息）
• CSS（设置数据的样式）
• XML（常用作数据传输的格式）

同步和异步的区别

同步：如果与服务器端的交互方式是同步，当客户端与服务器交互时，客户端就不能进行其他操作，只能等待服务器端的响应，会刷新页面。

异步：当客户端正在进行正常操作时，还可以同时与服务器进行交互，服务器响应客户端信息，将信息更新到网页局部，整个过程页面不刷新。

基础语法

ajax与form表单提交数据的区别

ajax提交数据页面不用刷新，原始数据还在，处理数据的过程中不影响页面其他操作；

form表单提交数据页面刷新，原始数据不在，并且处理数据的过程中无法做其他操作；

$.ajax({
    url:'',   # 控制数据的提交地址
    type:'',  # 控制请求方式(默认get请求)
    data:{},  # 组织提交的数据
    success:function(形参){
        # 异步回调函数
    }
})

数据编码格式

请求体中携带编码格式：

​ Content-Type:...

django针对不同编码方式对应的数据格式会采用不同的处理策略：

格式1：urlencoded

数据格式：name=jason&pwd=123&hobby=read

django后端统一处理到request.POST中

格式2：formdata

数据格式: 无法查阅

django后端自动将文件数据处理到request.FILES 普通数据request.POST

格式3：application/json

数据格式：json格式

django后端不会处理 在request.body中存储(bytes类型) 自己处理

语法注意事项：

​ data: JSON.stringify({'name':'jason','pwd':123}),

​ contentType:'application/json',

ajax携带文件数据

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

        }
    })
})

回调函数

后端跟ajax交互 不应该再返回页面，通常情况下都是返回 json 格式数据

前端针对HttpResponse和JsonResponse返回的json格式数据处理策略不同

前者不会自动反序列化，而后者会自动反序列化

如果想让前者也自动反序列化可以添加一个固定的参数：
dataType:'JSON'

序列化

Django内置的serializers

前端想拿到由ORM得到的数据库里面的一个个用户对象，后端想直接将实例化出来的数据对象直接发送给客户端，那么这个时候，就可以用Django给我们提供的序列化方式

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

SweetAlert插件

https://lipis.github.io/bootstrap-sweetalert/