Ajax

49 阅读1分钟

Ajax

概念:异步提交,局部刷新 ajax的功能与form表单类似,都是给后端发送数据,但是ajax是异步提交,即不用刷新页面也能提交数据。ajax是js自带的功能,不是一门新的技术点,我们学习的是jquery封装之后的版本。

基础语法

$.ajax({
    url: '',  //等价于form表单的action参数 控制数据提交地址
    type: 'post',  //等价于form表单的method参数 控制请求方式(默认get)
    data: {'name':'jason'},  //组织提交的数据
    success: function (args) {  //异步回调函数 后端接收到数据并向前端返回数据时触发,返回值被args接收
    	alert('123')  //回调函数的内容
    }
})

数据编码格式

Content-Type

3.jpg

格式1:urlencoded
不能携带文件数据,form变淡和ajax默认的编码格式
	数据格式:name=jason&pwd=123&hobby=read
	django后端统一处理到request.POST中
格式2:formdata
支持携带文件数据 form表单可以指定的编码格式,ajax不可以。
	数据格式:无法查阅
	django后端自动将文件数据处理到request.FILES中 普通数据处理到request.POST中
格式3:application/json
发送json格式数据 ajax支持的编码格式 form表单不能使用
	数据格式: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交互不应该再返回html页面,通常情况下都是返回json格式数据 前端针对HttpResponse和JsonResponse返回的json格式数据处理策略不同 前者不会自动反序列化,后者会自动反序列化,如果想让前者也会自动反序列化,可以加一个固定的参数:dataType:'JSON'

序列化

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