使用Ajax实现分页功能（基于Django框架）
概要：
之前有篇文章讲的是结合Django分页器Paginator来实现分页功能的，当时使用的是通过GET提交数据的方式来不断刷新网页得到不同的页面。最近正在学习Ajax，Ajax的最大的特点就是可以在不刷新页面的情况下进行数据请求，所以这次使用的是Ajax来实现分页功能。链接：使用Django分页器实现分页
最终效果：
后端：
网站后台代码主要负责将Article这个类进行分页，这里分页同样也是采用了Django的分页器Paginator来实现的。
# 使用Ajax实现分页功能
def ajax_page(request):
ar = Article.objects.all()
paginator = Paginator(ar, 8)
context = {}
# 使得全局变量i可以局部使用
global i
if request.method == 'GET':
# 刷新一次页面后回到最初的数据
i = 1
# 返回GET请求的模板页面及数据
context['content'] = paginator.get_page(1).object_list
return render(request, 'ajax_page.html', context)
else:
i += 1
# 当每次点击加载更多按钮后会加载下一页的数据并传递给前端页面显示
ar_list = []
ar_id = []
context['content']=paginator.get_page(i).object_list
for ar in context['content']:
ar_list.append(ar.title)
ar_id.append(ar.pk)
data = {}
data['status']='SUCCESS'
data['ar_list']=ar_list
data['ar_id']=ar_id
# 判断是否有下一页数据
if paginator.get_page(i).has_next():
data['has_next'] = 'ok'
else:
data['has_next'] = 'no'
return JsonResponse(data)该方法中有两种处理方法，当请求方式为GET时，将返回一个初始页面，当请求方式为POST时，即前端通过Ajax请求数据时，将查询分页器中后续的内容，并且将查询到的内容返回到前端显示。
前端：
前端页面主要提供一个按钮来激活对应的方法，从而使Ajax请求数据，当请求到数据后再利用$('#ajax_page').before(comment_html);的方式将请求到的数据追加到之前的页面的后面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script type="text/javascript" src="http://www.huangwenyang.cn/static/jquery.min.js"></script>
<title>ajax_page</title>
</head>
<body>
<div style="text-align: center">
{# 得到最初的GET请求页面数据 #}
{% for page in content %}
<a href="/content/?pk={{ page.pk }}" target="_blank">{{ page.title }}</a>
<br>
{% endfor %}
<form id="ajax_page">
{% csrf_token %}
<input id="submit" type="submit" name="submit" value="加载更多" class="btn btn-info">
</form>
</div>
</body>
<script type="text/javascript">
$('#ajax_page').submit(function () {
$.ajax({
url: '/ajax_page/',
type: 'POST',
cache: true,
data: $(this).serialize(),
success: function (data) {
console.log(data);
// 循环遍历数据并增加到前端页面
for(var i=0; i<data['ar_list'].length; i++){
var comment_html = "<div id='hwy_1'>" +
"<a href='/content/?pk=" + data['ar_id'][i] + "' target='_blank'>" + data['ar_list'][i] + "</a>"
+ "</div>";
$('#ajax_page').before(comment_html);
}
// 判断当前页的是否有下一页，如果没有下一页则禁止按钮点击
if (data['has_next'] == 'no'){
$('#submit').attr('value', '没有了...');
$('#submit').attr('disabled', 'disabled');
}
}
});
return false;
});
</script>
</html>
类似于before()还有append()、prepend()、after()。
append() - 在被选元素的结尾插入内容（内容的结尾，比如说有个a标签，则是在</a>这个标签之前添加东西）prepend() - 在被选元素的开头插入内容（内容的开始，比如说有个a标签，则是在<a>这个标签之后添加东西）
after() - 在被选元素之后插入内容（元素的结尾，比如说有个a标签，则是在</a>这个标签之后添加东西）
before() - 在被选元素之前插入内容（内容的开始，比如说有个a标签，则是在<a>这个标签之前添加东西）
其中的$('#submit').attr('value', '没有了...');$('#submit').attr('disabled', 'disabled'); 使按钮不能再点击并且修改了显示的内容。
浙公网安备 33010602011771号