如何在JSP页面加载完成后动态加载更多数据？

核心思路 #

页面优先渲染基础HTML结构（比如空的数据容器、加载提示），待页面完全加载完成后，通过AJAX异步请求后端接口获取数据，再动态渲染到页面中。这样用户不会看到长时间的页面卡顿，能先看到页面框架，数据加载过程更友好。

后端Java实现（Servlet示例） #

先写一个处理数据请求的Servlet，返回JSON格式的数据：

import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

@WebServlet("/api/fetch-data")
public class DataFetchServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        // 设置响应类型为JSON
        resp.setContentType("application/json");
        resp.setCharacterEncoding("UTF-8");

        // 替换为你的实际数据查询逻辑（比如从数据库/服务层获取数据）
        List<YourDataModel> dataList = yourDataService.getPartialData(); // 可按需分页查询

        // 用Jackson将数据序列化为JSON字符串
        ObjectMapper mapper = new ObjectMapper();
        String jsonData = mapper.writeValueAsString(dataList);

        // 返回JSON数据
        resp.getWriter().write(jsonData);
    }
}

注：需要引入Jackson依赖（Maven为例）：

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.15.2</version>
</dependency>

前端实现 #

方案1：jQuery异步请求（符合你的需求） #

JSP页面中先渲染空容器，页面加载完成后发起AJAX请求：

<!-- 页面先渲染基础结构 -->
<div id="data-container">
    <!-- 数据加载后会替换这里的内容 -->
    <p>数据加载中...</p>
</div>

<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(function() { // 页面加载完成后执行
    $.ajax({
        url: "/api/fetch-data",
        type: "GET",
        dataType: "json",
        success: function(data) {
            // 动态拼接HTML并渲染
            let content = '';
            data.forEach(item => {
                content += `
                    <div class="data-card">
                        <h4>${item.name}</h4>
                        <p>${item.description}</p>
                    </div>
                `;
            });
            $("#data-container").html(content);
        },
        error: function() {
            $("#data-container").html("<p>数据加载失败，请稍后重试</p>");
        }
    });
});
</script>

方案2：原生JavaScript请求（无需jQuery） #

如果不想依赖jQuery，也可以用原生fetch API：

<div id="data-container">
    <p>数据加载中...</p>
</div>

<script>
window.addEventListener('load', function() {
    const container = document.getElementById('data-container');
    
    fetch('/api/fetch-data')
        .then(response => {
            if (!response.ok) throw new Error('请求失败');
            return response.json();
        })
        .then(data => {
            let content = '';
            data.forEach(item => {
                content += `
                    <div class="data-card">
                        <h4>${item.name}</h4>
                        <p>${item.description}</p>
                    </div>
                `;
            });
            container.innerHTML = content;
        })
        .catch(() => {
            container.innerHTML = "<p>数据加载失败，请稍后重试</p>";
        });
});
</script>

额外优化建议 #

• 分页加载：如果数据量极大，可以在后端实现分页接口，前端每次加载一页数据，滚动到底部时自动加载下一页，进一步减少单次请求的耗时。
• 加载动画：将加载提示替换为更友好的动画（比如旋转图标），提升用户体验。
• 后端查询优化：检查数据查询逻辑，添加数据库索引、优化SQL语句，减少后端数据处理的耗时。
• 数据缓存：对于不常变化的数据，可以在后端添加缓存（比如Redis），避免重复查询数据库。

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