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})
# -------------------- page.html --------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.page {
text-decoration: none;
margin-right: 3px;
} .active {
background-color: saddlebrown;
color: white;
}
</style>
</head>
<body>
<!-- 模拟数据显示 -->
<ul>
{% for item in data %}
<li>{{ item }}</li>
{% endfor %}
</ul> <!-- 页码显示 -->
{% for foo in page_count %}
{% if foo == current_page %} <!-- 如果是当前页码，则进行热点显示 -->
<a href="/page/?page={{ foo }}" class="page active">{{ foo }}</a>
{% else %}
<a href="/page/?page={{ foo }}" class="page">{{ foo }}</a>
{% endif %}
{% endfor %} </body>
</html>
page.html
后端生成html代码进行页码处理
页码由后端进行生成后，传递给前端直接显示，这样可定制性更强，但是增加了代码的耦合度。
# -------------------- views.py --------------------
def page(request): if request.method == 'GET': current_page = int(request.GET.get('page',1)) # 获取页面，如果没有传递页码，默认显示第一页
start = ( current_page - 1 )* 10 # 获取起始页，每页显示10个元素
end = current_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，则页码数加一 temp_list = [] # 要返回给前端页面的html组成的列表
for i in range(1,count+1):
if i == current_page: # 对当先显示的页码进行特殊处理
temp = "<a href= '/page/?page={0}' class='page active' >{0}</a>".format(i)
else:
temp = "<a href= '/page/?page={0}' class='page' >{0}</a>".format(i)
temp_list.append(temp) temp_list=''.join(temp_list) return render(request,'page.html',{'data':data,'current_page':current_page,'temp_list':temp_list})
# -------------------- page.html --------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.page {
text-decoration: none;
margin-right: 3px;
} .active {
background-color: saddlebrown;
color: white;
}
</style>
</head>
<body>
<!-- 模拟数据显示 -->
<ul>
{% for item in data %}
<li>{{ item }}</li>
{% endfor %}
</ul> <!-- 页码显示 -->
{{ temp_list | safe }} </body>
</html>
page.html
PS:由于为了防止XSS攻击，默认后端传过来的html，页面是不会渲染的，会当成字符串直接打印，所以，这里使用了模板提供的过滤器 safe ,用来标识后端传递的代码是安全的，这样html就可以进行渲染了，当然还有第二种方法，在后端利用make_safe进行安全格式化。
from django.utils.safestring import mark_safe
temp_list = mark_safe(temp_list) # 利用mark_safe 安全格式化html
# 前端直接进行渲染即可
优化页码显示
- 抽出可能变化的量，比如每页显示的数据量，显示的页码量
- 当前页码小于1时优化，当前页码大于最大页码时优化
- 上一页、下一页功能
- 针对页码量的优化
all_data = [i for i in range(1007)] # 模拟总数据条数
def page(request):
if request.method == 'GET':
per_page_count = 10 # 每页显示的数量
pager_num = 11 # 一共显示多少个页码
current_page = int(request.GET.get('page',1)) # 获取页面，如果没有传递页码，默认显示第一页
start = ( current_page - 1 )* per_page_count # 获取起始页，每页显示10个元素
end = current_page * per_page_count # 计算结束页
data = all_data[start:end] # 根据起始页和结束页，对数据进行过滤
counts = len(all_data) # 获取总数据条目数
total_count,y = divmod(counts,per_page_count) # 计算分页数
if y:
total_count += 1 # 余数不为0，则页码数加一
# 页码处理
if total_count < pager_num : # 总页数小于11页，就定死显示1-11页码
start_index = 1
end_index = pager_num
else:
if current_page <= 6: # 当前页小于6时，就定死显示1-11页码
start_index = 1
end_index = pager_num
else: # 动态的显示pager_name个页码
start_index = current_page - int((pager_num / 2))
end_index = current_page + int((pager_num / 2))
if current_page + int((pager_num / 2)) >= total_count: # 当前页码的最大区间超过了总页码，就固定显示，最后的11个页码
start_index = total_count - per_page_count
end_index = total_count
# 上一页
if current_page - 1 <= 0 : # 如果当前页为1，那么就禁止使用上一页
per_html = "<a href= '#' class='page' >上一页</a>"
else:
per_html = "<a href= '/page/?page={0}' class='page' >上一页</a>".format(current_page-1)
temp_list = [] # 要返回给前端页面的html组成的列表
temp_list.append(per_html)
for i in range(start_index,end_index+1):
if i == current_page: # 对当先显示的页码进行特殊处理
temp = "<a href= '/page/?page={0}' class='page active' >{0}</a>".format(i)
else:
temp = "<a href= '/page/?page={0}' class='page' >{0}</a>".format(i)
temp_list.append(temp)
# 下一页
if current_page + 1 > total_count: # 如果当前页大于总页数，仅用下一页
after_html = "<a href= '#' class='page' >下一页</a>"
else:
after_html = "<a href= '/page/?page={0}' class='page' >下一页</a>".format(current_page + 1)
temp_list.append(after_html)
temp_list=''.join(temp_list)
return render(request,'page.html',{'data':data,'current_page':current_page,'temp_list':temp_list})
封装
由于分页功能在许多地方都会使用，如果每个地方都写这么长的代码，那么会非常麻烦，这里对分页功能进行封装。
在项目目录下创建utils目录用于存放模块/类文件。
#!/usr/bin/env python
# _*_coding:utf-8_*_
# __time__: 2018/3/13 00:02
# __author__: daxin
# __file__: pagination.py class Page(object): def __init__(self,current_page,counts,per_page_count=10,pager_num=11):
self.current_page = current_page
self.counts = counts
self.per_page_count = per_page_count
self.pager_num = pager_num @property
def start(self): # 获取起始索引
return ( self.current_page - 1 )* self.per_page_count @property
def end(self): # 获取结束索引
return self.current_page * self.per_page_count @property
def total_count(self): # 计算总页码
total_count, y = divmod(self.counts, self.per_page_count) # 计算分页数
if y:
total_count += 1 # 余数不为0，则页码数加一 return total_count def page_str(self,base_dir): # 传递url，可以配合不同的url生成页码
# 页码处理
if self.total_count < self.pager_num: # 总页数小于11页，就定死显示1-11页码
start_index = 1
end_index = self.pager_num
else:
if self.current_page <= 6: # 当前页小于6时，就定死显示1-11页码
start_index = 1
end_index = self.pager_num
else: # 动态的显示pager_name个页码
start_index = self.current_page - int((self.pager_num / 2))
end_index = self.current_page + int((self.pager_num / 2))
if self.current_page + int((self.pager_num / 2)) >= self.total_count: # 当前页码的最大区间超过了总页码，就固定显示，最后的11个页码
start_index = self.total_count - self.pager_num + 1
end_index = self.total_count # 上一页
if self.current_page - 1 <= 0: # 如果当前页为1，那么就禁止使用上一页
per_html = "<a href= '#' class='page' >上一页</a>"
else:
per_html = "<a href= '{1}?page={0}' class='page' >上一页</a>".format(self.current_page - 1,base_dir) temp_list = [] # 要返回给前端页面的html组成的列表 temp_list.append(per_html)
for i in range(start_index, end_index + 1):
if i == self.current_page: # 对当先显示的页码进行特殊处理
temp = "<a href= '{1}?page={0}' class='page active' >{0}</a>".format(i,base_dir)
else:
temp = "<a href= '{1}?page={0}' class='page' >{0}</a>".format(i,base_dir)
temp_list.append(temp) # 下一页
if self.current_page + 1 > self.total_count: # 如果当前页大于总页数，仅用下一页
after_html = "<a href= '#' class='page' >下一页</a>"
else:
after_html = "<a href= '{1}?page={0}' class='page' >下一页</a>".format(self.current_page + 1,base_dir)
temp_list.append(after_html) temp_list = ''.join(temp_list)
return temp_list
在views中倒入我们封装好的分页文件pagination文件即可。
from utils import pagination # 倒入我们写好的分页模块文件
def page(request):
if request.method == 'GET':
current_page = int(request.GET.get('page',1))
counts = len(all_data)
page_obj = pagination.Page(current_page,counts)
data = all_data[page_obj.start:page_obj.end]
temp_list =page_obj.page_str('/page/') # 传递url
return render(request,'page.html',{'data':data,'current_page':current_page,'temp_list':temp_list})
PS：这样我们的分页就封装完毕了，在其他地方需要使用的时候，可以直接调用pagination文件，引入Page类即可。