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

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

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返回一个信息或者说进行一个处理。

1. 定义一个用户返回的字典，比如：ret_data = {'status':null,'data':'xxx','error':'xxx'}
2. 当出现异常或者用户提交的数据不匹配时，可以对该字典的status，error进行修改
3. 最后把字典，json序列化后返回给ajax
4. 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方法：

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

# 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