如何在Django模板的<div id="test">中放置JS实现文章无限滚动

没问题，我来帮你搞定这个事儿～要把JS脚本放到<div id="test">内部，同时实现无限滚动加载内容，你可以这么做：

1. 将JS脚本直接嵌入到test div内部 #

在你的Django模板里，直接在{% endfor %}循环结束后、test div闭合前，添加<script>标签写入你的JS代码就行，这样脚本就属于test div的子元素了。修改后的模板代码如下：

{% block content %}
<div id="test">
    {% for post in posts %}
        {{post.title}} | {{post.text}}<br>
    {% endfor %}

    <!-- 把JS脚本放在这里，就属于test div内部啦 -->
    <script>
        // 先定义一个变量跟踪当前要加载的页码，初始值设为2（第一页已经通过模板渲染了）
        let nextPage = 2;

        $(window).scroll(function() {
            // 判断是否滚动到页面底部
            if($(window).scrollTop() === $(document).height() - $(window).height()) {
                // 发起AJAX请求获取更多帖子
                $.ajax({
                    url: "{% url 'load_more_posts' %}", // 你需要在Django里定义这个URL路由
                    type: "GET",
                    data: { page: nextPage }, // 传递页码参数给后端视图
                    success: function(response) {
                        // 把后端返回的新帖子内容追加到test div内部
                        $("#test").append(response);
                        // 更新页码，准备下一次加载
                        nextPage++;
                    },
                    error: function() {
                        alert("加载更多内容失败啦～");
                    }
                });
            }
        });
    </script>
</div>
{% endblock %}

2. 补充说明几个关键点 #

• jQuery依赖：要确保你的页面已经加载了jQuery，比如可以在base模板的<head>或者<body>末尾引入jQuery文件（本地静态文件或者CDN都可以），不然$符号会报错哦。
• 后端视图配置：你需要写一个Django视图函数，接收page参数，查询对应页码的帖子，然后渲染一个只包含帖子内容的小模板（比如post_item.html），把渲染后的HTML返回给前端。
• URL路由：给这个加载更多的视图配置对应的URL，比如在urls.py里添加path('load-more/', views.load_more_posts, name='load_more_posts')。

这样既满足了把JS脚本放到test div内部的需求，又能正常实现无限滚动加载新内容啦～

内容的提问来源于stack exchange，提问作者Belloz