Ajax

ajax简介

属于前端内容，不属于Python范围，但是必须结合后端使用，否则没有太大意义，因为是把前端数据提交到后端的。

form表单来提交数据到后端，但是每次提交数据都需要刷新页面，如果一直刷新页面体验就不好。

Ajax技术就是”异步提交、局部刷新“，就是不需要刷新整个页面，只需要刷新局部，主要就是刷新的时候无感

 

例子:github注册
动态获取用户名实时的跟后端确认并实时展示的前端(局部刷新)

朝发送请求的方式
1.浏览器地址栏直接输入url回车 GET请求
2.a标签href属性 GET请求
3.form表单 GET请求/POST请求
4.ajax GET请求/POST请求

 

Ajax我们只学习jQuery封装之后的版本(不学原生的 原生的复杂并且在实际项目中也一般不用)
所以我们在前端页面使用ajax的时候需要确保导入了jQuery
ps:并不只有jQuery能够实现ajax，其他的框架也可以 但是换汤不换药 原理是一样的

 

ajax小案例（加法运算）

想要使用ajax，必须要导入jQuery库

 

 

序列化使用

 

结果：

总结：
1. 后端如果使用return JsonResponse(d)， 前端不用反序列化，直接当成对象使用
2. 后端使用return HttpResponse(res)，前端需要自己反序列化:res= JSON.parse(res)
3. 后端使用return HttpResponse(res)，前端不反序列化，需要指定参数：dataType:'json'

 

前后端数据传输的编码格式（contentType）

前后端传输请求方式有两种：get、post

　　get路由的请求：url?a=1&b=2

前后端传呼数据的编码格式：

　　urlencoded

　　form-data

　　json

研究form表单

默认的数据编码格式是：urlencoded

数据格式：数据格式：username=kevin&password=123；---------boundry-------->二进制

django后端针对符合urlencoded编码格式的数据丢回自动帮助封装在request.POST中。

　　username=jason&password=123 >>> request.POST

如果把编码格式改为form-data，那么针对普通的键值对还是解析到request.POST中，而将文件解析到request.Files

form-data格式的是可以提交文件数据的，form表单是没有办法发送json格式数据的

研究ajax

　　默认的编码格式也是urlencoded

　　默认格式：username=jason&age=20

　　django后端针对符合rurlencoded编码格式的数据会自动解析封装到request.POST中

编码格式

请求头中的Content-Type：参数

默认提交编码格式是：application/x-www-form-urlencoded
它的数据格式是：username=dasdas&password=dasdas&gender=dasdas

针对application/x-www-form-urlencoded格式的数据，在Django后端是如何接收数据的
Django后端针对符合urlencoded格式的数据，django把数据都封装到了request.POST中了

另一种编码格式：

multipart/form-data

当从urlencoded转换成form-data的效果：

　　form表单就可以提交文件数据了

它的数据格式又是什么样子的呢?
Content-Type:
multipart/form-data; boundary=—WebKitFormBoundary7iwnnLo3TDiHIAQz—>文件数据

针对multipart/form-data格式的数据，Django后端是如何接收数据的?
针对普通数据django把数据封装到了request.POST中
针对文件数据django把数据封装到了reuqest.FILES中

 

Ajax提交json格式的数据

request对象方法补充
request.is_ajax()
判断当前请求是否是ajax请求 返回布尔值

 

提交json格式的数据必须满足两个条件：

　　1、编码格式必须是json格式的：contentType

　　2、数据必须是json{“a”：1}

 

针对json格式的数据，Django后端处理方式：

　　针对ajax提交的json格式的数据，django后端处理方式：

　　　　针对ajax提交的json格式的数据，django后端不再把数据封装到request.POST中了

对于json格式的数据，django后端不在做任何的封装，数据是纯原生的，发送过来的数据是二进制的。

js中的序列化：

JSON.stringify({'a': 1, b: 2}) ----------》{'a': 1, b: 2} 对象
contentType:'application/json',

django后端接收json格式的数据
json_str = request.body.decode('utf-8')
print(json_str)　　 # {"a":1,"b":2}

json_data = json.loads(json_str)
print(json_data) 　　 # {'a': 1, 'b': 2}
print(json_data.get('a'))

 

home.html

 view

 

 ajax提交文件数据

ajax发送文件需要借助js内置对象FormData

 views

 

Ajax结合layer弹窗实现删除的二次确认

我们使用第三方的UI弹窗：layer、sweetalert

https://layuiweb.com/doc/element/form.html ----------> layui
https://layuiweb.com/layer/index.htm---------------->layer

后端代码

 前端代码

 

 全部前端代码：

{% extends 'home.html' %}

{% block im %}
    <div class="panel-heading">作者列表</div>
    <div class="panel-body">
        <div class="jumbotron">

            <div>
                <table class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr >
                        <th>作者名</th>
                        <th>作者简介</th>
                        <th>作者电话</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for foo in au %}
                        <tr class="tr_{{ foo.id }}">
                        <td>{{ foo.authername }}</td>
                        <td>{{ foo.authordetial.authordetial }}</td>
                        <td>{{ foo.authordetial.phone }}</td>

                        <td>
                            <a href="/autheredit/?id={{ foo.pk }}">修改</a>
                            <button class="btn btn-info"  d_id="{{ foo.id }}">删除</button>
                        </td>
                    {% endfor %}
                    </tr>


                    </tbody>
                </table>
            </div>
        </div>
    </div>

{% endblock %}
    {% block js %}
        <script>
            $('.btn').click(function () {
                var d_id = $(this).attr('d_id');  //这里不可以设置id，然后用id取值，这样会变成只有第一条删除，因为id是唯一的。
                var _this = $(this) ;            //这里用于下面的拼接，可以使页面刷新，并且弹窗可12
                layer.confirm('是否确认删除？', {
                btn: ['确定', '取消'] //按钮
            }, function () {
                $.ajax({
                    url: '/autherdel/',
                    type: 'post',
                    data: {id: d_id},
                    success: function (res) {
                        if (res.code == 200) {
                            layer.msg(res.msg, {icon: 1});  //后端
                            {#location.reload();        //这种删除后会立刻刷新当前页面，看不到弹窗#}
                            {#layer.msg(res.msg);#}
                            {#_this.parent().parent().remove(); //此时的this是.btn将tr直接删除#}
                            $(".tr_" + d_id).remove();

                        }

                    }

                });
            })

            });

        </script>

    {% endblock %}

批量插入数据（bulk_create）

 将需要添加的数据先放进一个列表里，然后再用数据库进行添加，节省事件,当你想要批量插入数据的时候 使用orm给你提供的bulk_create能够大大的减少操作时间

 以下是将数据一个一个插入数据库就会很慢，因为要访问数据库加入一条数据在访问数据库再加入数据，如果数量过多会导致数据库崩溃