一个非常简单易懂的Django上拉加载更多

为什么强调Django,因为用到了Django里的分页pagination模块,这个方法作为根本看不懂json的人(例如我)应该比较试用,也许不是。

总体来说还是用到jQuery的ajax方法,直接贴代码:

var i = 2

function loadmore() {
var url = window. location. pathname,
url = url. substring( url. lastIndexOf( '/') + 1, url. length);

if ( url. includes( "search")) {} else {
var reg = new RegExp( "list", "g");
url = url. replace(reg, "loadmore");
var xmlhttp = new XMLHttpRequest();
xmlhttp. onreadystatechange = function() {
if ( xmlhttp. readyState == 4 && xmlhttp. status == 200) {
$( '.list'). append( xmlhttp. responseText);
var idclass = $( '.detail');
idclass. each( function() {
var content = $( this). text();
$( this). html(content);
});
}
}
xmlhttp. open( "GET", url + "?page=" + i, true);
i = i + 1;
xmlhttp. send( null);
}
}

要说的应该就是:xmlhttp.open("GET", url + "?page=" + i, true);

我为加载的模块重新写了一个页面,以及函数名是loadmore,就是上面替换的值,重写的模块也是单独将需要加载的模块拿了出来。

而“?page=”+i,就是字面上的意思,Django的翻页默认的网址就是这个,然后每次从他已经渲染好的page页面里拿东西就可以了。

至于下拉的代码就更简单了:

$( document). scroll( function() {
if ( $( document). scrollTop() >= $( document). height() - $( window). height()) {
loadmore();
}
});

顺带贴一下view的代码:

def loadmore( request):
list = Info.objects.order_by( "index")
limit = 5
paginor = Paginator( list, limit)
page = request.GET.get( 'page', 2)
item_info = paginor.page(page)

context = { 'list': item_info,}
template = 'test.html'
return render(request, template, context)

以及url:

path( 'loadmore', views.loadmore, name= 'loadmore'),

整体思路基本就是,我异步加载另一个已经做好渲染的页面。

猜你喜欢

转载自blog.csdn.net/lala55lan20/article/details/80924484