Javascript 如何在django应用程序中加载更多内容？

我已经开发了在django应用程序中查看组列表的模板。我所知道的是，经过更多的分组后，页面会向下滚动。我无法看到所有组的名称。我还想在开始时只查看4个组名，然后单击“加载更多”按钮后，必须显示下4个组。我不能这样做

    {% extends "groups/group_base.html" %}
{% block pregroup %}
<div class="col-md-4">
    <div class="content">
        {% if user.is_authenticated %}
        <h2>
            Welcome back
            <a href="{% url 'posts:for_user' username=user.username %}">@{{user.username }}</a>
        </h2>

    {% endif %}
            <h2>Groups</h2>

            <p>Welcome to the Groups Page! Select a Group with a shared interest!</p>
    </div>
    {% if user.is_authenticated %}
    <a href="{% url 'groups:create' %}" class="btn btn-md btn-fill btn-warning"><span class="glyphicon glyphicon-plus-sign"></span> Create New Group!</a>
    {% endif %}
</div>
{% endblock %}

{% block group_content %}
<div class="col-md-8">
    <div class="list-group">
        {% for group in object_list %}
          <a class="list-group-item" href="{% url 'groups:single' slug=group.slug %}">
                 <h3 class="title list-group-item-heading">{{ group.name }}</h3>
            <div class="list-group-item-text container-fluid">
                {{ group.description_html|safe }}
                <div class="row">
                    <div class="col-md-4">
                        <span class="badge">{{ group.members.count }}</span> member{{ group.members.count|pluralize }}
                    </div>
                    <div class="col-md-4">
                        <span class="badge">{{ group.posts.count }}</span> post{{ group.posts.count|pluralize }}
                    </div>
                </div>
            </div>
        </a>
        {% endfor %}

                    </div>

</div>
{% endblock %}

{%extends“groups/group_base.html”%}
{%block pregroup%}
{%if user.u经过身份验证%}
欢迎回来
{%endif%}
组
欢迎来到群组页面！选择具有共同兴趣的组

{%if user.u经过身份验证%}
{%endif%}
{%endblock%}
{%block group_content%}
{对象_列表%中的组的百分比}
{%endfor%}
{%endblock%}

---

我想将滚动选项添加到此页面。怎么做？分页可能是一种解决方案。但我想在同一页上加载列表本身。

1。将对象列表解析为JSON对象：这将允许您向客户端提供所有存在的组，以实现让用户保持在同一页面上的目标

2。使用jQuery或Javascript刷新列出了组的html容器：根据数据的大小和类型，还可以编写一个新视图，将过滤后的JSON对象返回到Javascript中的post方法

例如：

可能重复的

    /*
     Load more content with jQuery - May 21, 2013
    (c) 2013 @ElmahdiMahmoud
    */   

$(function () {
    $("div").slice(0, 4).show();
    $("#loadMore").on('click', function (e) {
        e.preventDefault();
        $("div:hidden").slice(0, 4).slideDown();
        if ($("div:hidden").length == 0) {
            $("#load").fadeOut('slow');
        }
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 1500);
    });
});

$('a[href=#top]').click(function () {
    $('body,html').animate({
        scrollTop: 0
    }, 600);
    return false;
});

$(window).scroll(function () {
    if ($(this).scrollTop() > 50) {
        $('.totop a').fadeIn();
    } else {
        $('.totop a').fadeOut();
    }
});