js+django 实现load more功能

0x00.前言

好久没更新博客了。
也是因为之前项目进度比较赶，做完一个功能就紧接着做下一个也没有整理的时间，最近放慢下来就想把这些做过的东西记录一下。
其实这个功能挺简单的吧还，但我之前搞了大半天，主要是在纠结怎么分页（一开始想用django自带的paginator但post过来的时候分页就会丢失也不知道为啥，急于求成的我并没有深究这个问题，最后用offset来控制）
很多财经门户网站都会用这种点击load more的方式，有一些也会用滚动到地步自动load more，这两个的区别不是很大，比起传统按键分页的好处是用户浏览内容更方便，不用一直刷新网页。不过数据量很大的情况下网页也会变得非常长，可能不是很方便回溯。

0x01.js代码

代码全员借鉴，自己修改了一下
首先设置一个button，为它设置id，注册点击事件

<div id="more-box" style="text-align: center">
    <button href="#" class="btn btn-info btn-lg" id="more">加载更多</button>
</div>

为了符合正常审美，字体最好居中，如果要添加的内容不需要居中，记得把html插入到这个div的前面

var offset = parseInt('{{ offset }}');
$('#more').click(function () {
    offset += 8;# 页偏移
    $('input[name="offset"]').val(offset);
    $.ajax({
        url: '# 得到数据的接口',
        type: 'GET',
        cache: true,
        data: {# 传参
            'offset': offset,
        },
        success: function (data) {
            console.log(data);
            var articles = data['articles'];
            for (var i = 0; i < articles.length; i++) {
                var result = html# 要插入的html
                $('#more-box').before(result);
            }
            if (data['has_next'] == 'no') {
                $('#more').text('没有了...');
                $('#more').attr('disabled', 'disabled');
            }
        }
    });
    return false;
});

返回格式是json，与html代码结合需要用到一个format函数

String.prototype.format = function () {
    if (arguments.length === 0) return this;
    var param = arguments[0], str = this;
    if (typeof (param) === 'object') {
        for (var key in param) str = str.replace(new RegExp("\\{" + key + "\\}", "g"), param[key]);
        return str;
    } else {
        for (var i = 0; i < arguments.length; i++) str = str.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]);
        return str;
    }
};

0x02.django

url 这里用的两个url，一个是初次加载一个是加载更多，也有用get/post分别处理的。

path('live/', views.show_live),
path('live/more/', views.more_live),

view 初次加载就不用赘述了，加载更多主要是要对查询结果做一个切片，根据offset，如果数量过少就传一个没有下一页的参数，js那边接收到就会把button设为disable。view这边主要是要根据需要的字段构造一个json response

def more(request):
    offset = int(request.GET.get('offset'))
    category_type = request.GET.get('category_type')
    category = get_object_or_None(Category, name_en=category_type)
    articles = Article.objects.filter(category=category, hidden=False).order_by('-publish_time')[offset-8:offset]
    
    article_dict = {}
    article_list = []
    
    if len(articles) < 8:
        article_dict['has_next'] = 'no'
    
    for article in articles:
        publish_time = deal_time(article.publish_time)
        dic = {'id': article.id, 'title': article.title, 'abstract': article.abstract, 'category_name': article.category.name_cn, 'publish_time': publish_time, 'source_name': article.source_name, 'source_url': article.source_url, 'cover': article.cover}
        article_list.append(dic)
    article_dict['articles'] = article_list
    response = JsonResponse(article_dict)
    return response

0x03.待完善

肯定还是不完美的，有些地方的逻辑处理的也比较粗糙但是姑且能用。待修改吧~

最后编辑于：2019.06.28 10:00:57