Day 61 Ajax

Day 61 Ajax

1、Ajax

异步提交 局部刷新
与form表单区别 可以 自动 复制一份给后端校验

ajax其实就是js自带的功能 不是一门新的技术点 我们学习的是jQuery封装之后版本

1.1、基础语法

$.ajax({
    url:'', 控制数据的提交地址
    type:'', 控制请求方式 （默认get请求）
    data:{}, 组织提交的数据
    success:function(形参){
    	异步回调函数
}
})
1
2
3
4
5
6
7
8

1.2、数据编码格式

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

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

格式三：application/json
数据格式：json格式
django后端不会处理 在request.boby中存储(bytesl类型)自己处理
语法注意事项

data:JSON.stringify({'name':}),contenType:'application/json'
1

1.3、ajax携带文件数据

$('#d3').click(function(){
    1.产生内置对象
    let formData = new FormData();
    2.添加普通数据
    formData。append('username',$('#d1').val())
    3.添加文件数据
    formDate.append('file',$)
    4.发送ajax请求
    $.ajax({
        url:'',
        type:'post',
        data:formData,
        contentType:false,  // 不适用任何编码
        processDate:false,  // 不处理数据格式
        success:function(args){
            
        }
    })
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

1.4、回调函数

后端跟ajax交互 不应该再返回页面 通常情况下 都是返回json格式数据
前端针对HttpResponse和JsonResponse返回的json格式数据处理策略不同
HttpResponse 不会自动反序列化 而JsonResponse 会自动反序列化如果想让前者自动反序列化 可以添加一个固定的参数

dataType:'JSON'
1

1.5、序列化

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

作业

views.py

def book_delete(request):
    if request.is_ajax():
        if request.method=='POST':
            id=request.POST.get('id')
            print(id)
            models.Book.objects.filter(pk=id).delete()
    return HttpResponse('/book/')
1
2
3
4
5
6
7

book.html

<script>
    $('.b1').click(function () {
        swal({
          title: "确定要删除该书籍信息吗?",
          text: "删除该书籍信息后 将无法再进行恢复！",
          icon: "warning",
          buttons: ['取消','确认'],
          dangerMode: true,
        })
        .then((willDelete) => {
          if (willDelete) {
            swal("已成功将该书籍信息删除！", {
                icon: "success",});
            let id=$(this)
            $.ajax({
                url:'/bookdelete/',
                type:'post',
                data: {'id':id.attr('pid')},
                success:function (args){
                    window.location.href=args
                }
            })
          } else {
            swal("已取消该删除操作");
          }
});



    })
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31