Ajax

Ajax

Ajax基本操作

1.Ajax不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术，使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面

2.基础语法
<script>
$.ajax({
    url:'',  // 朝那个地址发送数据，等价于form表单action
    type:'post',  // 提交数据的方式，等价于method参数(默认get请求)
    data:{},  // 发送给后端的数据的数据
    success:function (形参) {
        异步回调函数
    }
})
</script>

3.例子
<input type="text" id="d1">+
<input type="text" id="d2">=
<input type="text" id="d3">
<script>
    $('#d2').blur(function (){
        // 使用ajax朝后端发送数据
        $.ajax({
            url:'',  // 朝那个地址发送数据
            type:'post',  // 提交数据的方式
            data:{'i1':$('#d1').val(), 'i2':$('#d2').val()},  // 发送给后端的数据的数据
            success:function (args) {  // 形参args是用于接收后端返回的数据
                $('#d3').val(args)
            }
        })
    })
</script>

数据编码格式

Content-Type
1.格式1:urlencoded
数据格式: name=barry&pwd=123&hobby=read
django后端统一处理到request.POST中

2.格式2:formdata
数据格式: 无法查阅
django后端自动将文件数据处理到request.FILES 普通数据request.POST

3.格式3:application/json
数据格式: json格式
django后端不会处理 在request.body中存储(bytes类型) 自己处理

4.语法注意事项
$('#d2').blur(function (){
    // 使用ajax朝后端发送数据
    $.ajax({
        url:'',  // 朝那个地址发送数据
        type:'post',  // 提交数据的方式
        data:JSON.stringify({'name':'barry','pwd':123}),
contentType:'application/json',
        success:function (args) {
             $('#d3').val(args)
        }
    })
})
data: JSON.stringify({'name':'barry','pwd':123}),
contentType:'application/json',
    
5.后端处理json格式
if request.method == 'POST':
    json_bytes = request.body
    json_dict = json.loads(json_bytes)
    print(json_dict)

ajax携带文件数据

1.ajax携带文件数据
<input type="text" id="d1">
<input type="file" id="d2">
<button id="d3">上传</button>
<script>
    $('#d2').blur(function () {
        // 产生一个内置对象
        let formData = new FormData();
        // 添加普通数据
        formData.append('username', $('#d1').val())
        // 添加文件数据
        formData.append('file', $('#d2')[0].files[0])
        // 发送ajax请求
        $.ajax({
            url:'',  // 朝那个地址发送数据
            type:'post',  // 提交数据的方式
            data:formData,  // 发送给后端的数据的数据
            contentType:false,  // 不使用任何编码
            processData: false,  // 不处理数据
            success:function (args) {  // 形参args是用于接收后端返回的数据
            }
        })
    })
</script>

回调函数

1.后端与ajax交互，不应该返回页面，通常情况都是返回json格式数据
2.前端对HttpResponse和JsonResponse返回的json格式数据处理方式不同
2.1对HttpResponse不会自动反序列化
2.2对JsonResponse会自动反序列化
2.3如果想要让HttpResponse也自动反序列化可以添加一个固定的参数(在ajax内)
dataType:'JSON'

序列化

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