Django+ajax实现页面底部加载

分类：djangoajax

djangoajax

Django+ajax实现页面底部加载分页

第一步是把photo的QuerySet分页展示，我这里直接用127.0.0.1:8000/x/的url，，所以在urls.py里这样写

url(r’^(?P<page>\d+)/$’,index,name=’分页’),

每页加载的数量改了好几次，最后决定少一点，定在5，那么需要根据page来分割QuerySet取得相对应的图片，然而QuerySet是无法排序的，先用list转换成列表，然后再切片。 views.py

):if request.method==’POST’:…else:photos=list(Photo.objects.filter(is_show=True).order_by(‘-id’))[int(page)*5:(int(page)+1)*5]return render_to_response(‘index.html’,RequestContext(request,{‘photos’:photos}))

这样每页展示的图片就只有5张。

底部加载

一般当页面滑动到底部进行操作的代码结构类似这样：

$(window).scroll(scrollTop = $(windowHeight = $(this).height();//可视页面的高度if (scrollTop + windowHeight == scrollHeight) {//DO SOMETHING}});

写到这里我又停下来再理了一下思路，要获得下一个页面的图片，首先要知道下一页的url，而这个加载本身是发生在主页，也就是没有/x/这个部分,又要分情况处理了。

(cuts.length<5){var cur_page_num=1;}else{var cur_page_num=parseInt(cuts[3]);}

并且在不断往下拖动过程中需要一个循环自加页码的步骤。接下来用ajax的load方法获取对应的div，但是load方法必须要加载到一个容器里，于是乎还要先创建一个容器来装新加载的，如果直接加载到原来的div里面会覆盖之前的photo了。所有photo的装在一个大容器中

<div class=’container-fluid grid’>{% block content %}{% endblock %}</div>

在block里面是每一个小的photo div

为了避免每一次加载覆盖之前的内容，每一次都需要创建一个容器，并且用唯一标示与其他的容器区分开。因此在js里面这样写：

if (scrollTop + windowHeight == scrollHeight) {var nexturl=cuts[0]+’//’+cuts[1]+cuts[2]+’/’+String(cur_page_num+1)+’/’;//拼接下一页的urlcur_page_num+=newnode=document.createElement(“div”);newnode.setAttribute(“class”, “container-fluid grid”);newnode.setAttribute(“id”,”new”+String(cur_page_num));document.body.appendChild(newnode);$(‘#new’+String(cur_page_num)).load(nexturl+’ .grid-item’);}

每一次下滑拖到底部时，页码都会自加1，这样就避免了只能加载下一页的情况，新创建的div同样有class=’container-fluid grid’，和前面的保持样式一致，另外增加一个id=new+页码，使用load方法加载到这个新的容器中。至此整个加载过程基本实现。

上一篇JavaSrcipt快速入门（二）(2015.8.3)

顶0踩0

你可以选择这样的“三心二意”：信心恒心决心;创意乐意。

相关文章：

你感兴趣的文章：

标签云：