Django基础之Ajax

发表于 更新于 分类于

内容概要

  • Ajax异步提交

  • 前后端传输数据的编码格式

  • Ajax发送json格式数据

    1
    2
    3
    4
    5
    6
    7
    # python
    import json
    json.dumps
    json.loads
    # js
    JSON.stringfy
    JSON.parse

  • Ajax发送文件数据

  • Ajax结合sweetalert插件实现删除的二次确认

内容详细

Ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
异步提交 局部刷新
"""
同步:提交任务之后原地等待任务结果期间不做任何事
异步:提交任务之后不原地等待任务结果 等任务产生结果通过异步回调机制
"""
前戏页面
    博客园注册页面
    github注册页面
 
能够发送网络请求的方法
    a               get请求
    form表单         get请求、post请求
    ajax              get请求、post请求
 
ajax不是一门独立的语言 而是一个功能
    能够实现ajax功能的书写方式有很多 
        eg:原生js代码 jQuery封装代码 组件框架代码...
    我们这里学习jQuery版本
 
ajax前戏
    需求:保证页面不刷新的情况下完成数字的和

基本语法

1
2
3
4
5
6
7
8
9
10
11
12
// ajax发送给后端
$.ajax({
            url:'',  // 控制提交地址    规律与form标签的action参数一致
            type:'post',  // 控制请求方式
            data:{'i1':i1Val,'i2':i2Val},  // 发送的数据
            success:function (args) {
                    // 异步回调函数
                    {#alert(args)#}
                    // 查看input框并且写入数据
                    $('#i3').val(args)
            }
        })

参数补充

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
32
33
34
35
36
37
38
39
40
41
42
43
44
contentType
    前后端数据传输格式主要有三种
        application/x-www-form-urlencoded
        multipart/form-data
        application/json
    朝后端发送数据的时候针对不同的方式后端有不同的处理措施
    
    # form表单默认是urlencoded编码格式
    数据格式username=jason&password=234
    django后端针对符合urlencoded格式的数据会自动解析并封装到request.POST中
    django后端针对form-data格式的数据文件自动封装到request.FILES中 普通的符合urlencoded还是封装到request.POST中
    
    # ajax默认是urlencoded编码格式
        1.ajax发送json格式数据
            django后端不做任何处理 直接以二进制形式存放在request.body中
            data
            contentType
        2.ajax发送文件数据
            $('#d1').on('click',function () {
                // 1.先生成一个内置对象
                let formDataObj = new FormData();
                // 2.添加符合urlencoded格式的普通键值对数据
                formDataObj.append('name','jason');
                formDataObj.append('password',123);
                // 3.添加文件数据
                formDataObj.append('myfile',$('#myfile')[0].files[0]);
                // ajax发送给后端
                $.ajax({
                    url:'',  // 控制提交地址    规律与form标签的action参数一致
                    type:'post',  // 控制请求方式
                    data:formDataObj,  // 发送的数据

                    // 额外指定两个参数
                    contentType:false,  // 不采用任何编码 后端能够直接识别formdata对象
                    processData:false,  // 不处理formdata对象 直接发送即可

                    success:function (args) {
                    }
                })
            });
dataType
    django后端如果使用JsonResponse给回调函数返回json格式字符串
    回调函数会自动反序列成js中的自定义对象
    django后端不使用JsonResponse而是自己通过json模块序列化的数据 回调函数接收到之后不会自动反序列

基于ajax实现二次确认

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
<script>
        $('.del_link').on('click',function (a) {
            var $aEle = $(this);
            var deleteId = $(this).attr('delete_id');
            // 提示二次确认
            res = confirm('你确定真的要删吗?');
            // 判断是否删除
            if (res){
                // 发送ajax请求
                $.ajax({
                    url:"/book_delete/" + deleteId,
                    type:'get',
                    data:{},
                    success:function (args) {
                        // 1.页面刷新  不推荐使用
                        window.location.reload();
                        // 2.DOM操作   正规 用户体验好
                        $aEle.parent().parent().remove()
                    }
                })
            }else{
                alert('怂逼不敢删啦')
            }
        })
</script>