Python自动化运维 - Django（二）Ajax基础 - 自定义分页

　　AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

　　AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

什么是Ajax

　　AJAX = 异步 JavaScript 和 XML，是一种用于创建快速动态网页的技术。

　　通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

概括：AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

使用ajax

　　我们在运维开发过程中用到的ajax基本都是jquery提供的，因为jquery封装的简单易懂，用起来比原生的要方便很多，节省了大量的学习成本，这里将以jquery提供的ajax来做实例说明。（依赖XMLHttprequest对象，这里不再详细说明）

语法

jQuery.ajax([settings])    # 方式一
$.ajax([settings])         # 方式二

PS：因为jQuery可以用$，进行表示，所以一般常用的就是$.ajax()

参数　

ajax提供了很多参数，在提交的时候可以进行选择，这里settings表示一个参数字典。常用的参数如下：

url：表示要提交到的url地址
type：表示以什么方式提交
data：表示要提交什么数据，可以是一个字典，用于存放要提交的name和value
dataType：表示接受数据库的类型，一般为JSON,当指定该参数值为JSON时，那么success函数的参数data，就会被jquery转正json对象(不用再调用json来转换了 )
traditional：告诉jquery阻止深度序列化，默认情况下为false会深度序列化这个对象，以适应PHP等框架，我们可以通过设置tradtional为true，这样传递checkbox的多选的情况下(列表、数组等)，才可以正常传输到后端。
success：值为函数对象，执行成功后，会自动执行该函数。(必须要有参数，表示执行成功后，服务端返回的data)

<script>
$('.submit').click(function (){
    $.ajax({
        url:'/test',
        type:'post',
        data:{'user':'root','password':'123456'},
        success:function (data){       // data是服务器端返回的字符串，所以django需要使用Httpresponse进行返回（其实render也可以但是前端json反序列化就会出问题，但是redirect是不行的）

if (data == 'ok') { location.reload() // 成功重新加载页面 }else { alert(data) // 否则就弹出告警信息 } } }) }) </script>

jQuery还封装的有其他方法比如：$.get,$.post等，他们内部调用的都是$.ajax()，需要注意的是，传递的参数不同，直接像函数传参一样，传递即可，不用是字典类型

$.post(url='xxx',data={xxx},...)

PS：data参数在这里需要注意的是，如果我们要提交的是某个form下的数据，那么我们一个一个取就比较麻烦了，这时可以找到form通过serialize()来获取form中的所有数据组成name，value对，进行提交。

注意　

使用ajax提交，大部分场景下都是对用户提交的数据进行验证，这里要说的是如何使django返回一个信息或者说进行一个处理。

定义一个用户返回的字典，比如：ret_data = {'status':null,'data':'xxx','error':'xxx'}
当出现异常或者用户提交的数据不匹配时，可以对该字典的status，error进行修改
最后把字典，json序列化后返回给ajax
ajax的函数，对服务端返回的data，反序列化后进行解析，根据不同的status或者code来定义不同的操作(javascript反序列化，json.parse(data),序列化用 json.stringfy('abc'))

ajax异常处理

ajax参数中还有个error对应一个函数，用来进行异常处理。简单的说Ajax请求通过XMLHttpRequest对象发送请求，该对象有四个状态（readyState）：

0 － (未初始化)  # 还没有调用send()方法
1 － (载入)     # 已调用send()方法，正在发送请求
2 － (载入完成)  # send()方法执行完成，已经接收到全部响应内容
3 － (交互)     # 正在解析响应内容
4 － (完成)     # 响应内容解析完成，可以在客户端调用了

当XMLHttpRequest.readyState为4时，表示ajax请求已经完成可以得到响应结果。

ajax的success和error方法根据响应状态码来触发。当XMLHttpRequest.status为200的时候，表示响应成功，此时触发success().其他状态码则触发error()。

除了根据响应状态码外，ajax还会在下列情况下走error方法：

返回数据类型不是JSON
网络中断
后台响应中断

# error函数语法为：

# (默 认: 自动判断 (xml 或 html)) 请求失败时调用时间。
# 参数有以下三个：XMLHttpRequest 对象、错误信息、（可选）捕获的错误对象。
# 如果发生了错误，错误信息（第二个参数）除了得到null之外，
# 还可能是"timeout", "error", "notmodified" 和 "parsererror"。
  
# textStatus: "timeout", "error", "notmodified" 和 "parsererror"。
 
error：function (XMLHttpRequest, textStatus, errorThrown) 
{ 
    ''' javascript code '''  
}

定制ajax

　　类似于公共配置的含义，我们可以利用ajaxsetup，对当前页面中的所有ajax请求，进行统一配置。其中一个常用的配置为beforeSend，用于在ajax提交时先执行的函数，它的值是一个函数。

$.ajaxsetup({
    beforeSend:function (xhr,setting) {
        xhr.setRequestHeader('key','value)
    }
})

PS:这里的xhr就是前面所说的XMLHttpRequest对象，利用它的setRequestHearder方法来为所有的ajax请求添加请求头。

自定义分页　

　　当要显示的数据量很多，超过了一页时，就需要进行分页显示，这里的自定义分页，是独立于django框架的，并且这里的逻辑在任何语言中都适用。

由前端对页码进行处理

# --------------------  views.py  --------------------

def page(request):

    if request.method == 'GET':

        start_page = int(request.GET.get('page',1))  # 获取页面，如果没有传递页码，默认显示第一页
        start = ( start_page - 1 )* 10               # 获取起始页，每页显示10个元素
        end = start_page * 10                        # 计算结束页
        all_data = [ i for i in range(107)]          # 模拟总数据条数
        data = all_data[start:end]                   # 根据起始页和结束页，对数据进行过滤
        counts = len(all_data)  　　　　　　　　　　　　 # 获取总数据条目数
        count,y = divmod(counts,10)  　　　　　　　　   # 计算分页数
        if y:
            count += 1   　　　　　　　　　　　　　　　　  # 余数不为0，则页码数加一

        page_count = [ data for data in range(1,count+1)]   # 由于jinja2不能使用 类C式的循环，那么这里进行生成

    return render(request,'page.html',{'data':data,'page_count':page_count,'current_page':start_page})

 1 # -------------------- page.html --------------------
 2 <!DOCTYPE html>
 3 <html lang="en">
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <style>
 8         .page {
 9             text-decoration: none;
10             margin-right: 3px;
11         }
12 
13         .active {
14             background-color: saddlebrown;
15             color: white;
16         }
17     </style>
18 </head>
19 <body>
20 <!-- 模拟数据显示 -->
21 <ul>
22     {% for item in data %}
23         <li>{{ item }}</li>
24     {% endfor %}
25 </ul>
26 
27 <!-- 页码显示 -->
28 {% for foo in page_count %}
29     {% if foo == current_page %}     <!-- 如果是当前页码，则进行热点显示 -->
30         <a href="/page/?page={{ foo }}" class="page active">{{ foo }}</a>
31     {% else %}
32         <a href="/page/?page={{ foo }}" class="page">{{ foo }}</a>
33     {% endif %}
34 {% endfor %}
35 
36 </body>
37 </html>

page.html