使用AJAX动态加载列表数据并展示

利用AJAX技术，可以通过异步请求从服务器获取数据，并将这些数据以JSON格式返回，然后在前端页面中动态地渲染这些数据，从而实现页面的部分更新，提高用户体验。

具体实现步骤如下：

前端部分

当用户点击某个链接或按钮时，触发AJAX请求，向指定URL发送POST请求，携带必要的参数（如页码、时间范围等），并在成功回调函数中处理返回的数据。

$(document).ready(function() {
    $('a').click(function() {
        $.ajax({
            type: 'POST',
            url: 'http://localhost:8080/Table_fenye/servlet/ListData',
            data: {
                page: $(this).text(),
                starttime: $('#start').val(),
                stoptime: $('#end').val(),
                obj: $('#obj').val(),
                opt: $('#opt').val(),
                now: $('#now').val()
            },
            dataType: 'json',
            success: function(data) {
                $('#ct').empty(); // 清空表格内容
                var html = '';
                $.each(data, function(index, item) {
                    html += '' +
                        '' + item.msg + '' +
                        '' + item.time + '' +
                        '' + item.username + '' +
                        '' + item.app + '' +
                        '' + item.operation + '' +
                        '' + item.object + '' +
                        '' + item.result + '' +
                        '' + item.detail + '' +
                        '';
                });
                $('#ct').html(html);
            }
        });
    });
});

后端部分

后端需要处理前端发送的请求，解析请求参数，执行数据库查询操作，将查询结果转换为JSON格式返回给前端。

public class ListData extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("application/json;charset=utf-8");
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        PrintWriter out = response.getWriter();

        String page = request.getParameter("page");
        String starttime = request.getParameter("starttime");
        String stoptime = request.getParameter("stoptime");
        String obj = request.getParameter("obj");
        String opt = request.getParameter("opt");
        String now = request.getParameter("now");

        int pageSize = 20;
        int pageNum = 0;

        if (page.equals("上一页")) {
            pageNum = Integer.valueOf(now) - 2;
        } else if (page.equals("下一页")) {
            pageNum = Integer.valueOf(now);
        } else {
            pageNum = Integer.valueOf(page) - 1;
        }

        DateFormat format = new SimpleDateFormat("yyyy-MM-dd_HH:mm:ss");
        java.sql.Date startDate = null;
        java.sql.Date endDate = null;

        try {
            startDate = new java.sql.Date(format.parse(starttime).getTime());
            endDate = new java.sql.Date(format.parse(stoptime).getTime());
        } catch (ParseException e) {
            e.printStackTrace();
        }

        int from = pageNum * pageSize;
        List list = new ArrayList<>();

        Connection cOnn= JdbcUtil.getConn();
        String query = "SELECT id, msg, time, username, app, operation, object, result, detail FROM startstopinfo "
                + "WHERE app = '" + obj + "' AND operation = '" + opt + "' AND time2 >= '" + startDate + "' AND time2 <= '" + endDate + "' "
                + "ORDER BY time2 LIMIT " + from + ", " + pageSize;

        Statement stmt;
        try {
            stmt = conn.createStatement();
            ResultSet rs = stmt.executeQuery(query);

            while (rs.next()) {
                StartstopInfo info = new StartstopInfo();
                info.setId(rs.getInt(1));
                info.setMsg(rs.getString(2));
                info.setTime(rs.getString(3));
                info.setUsername(rs.getString(4));
                info.setApp(rs.getString(5));
                info.setOperation(rs.getString(6));
                info.setObject(rs.getString(7));
                info.setResult(rs.getString(8));
                info.setDetail(rs.getString(9));
                list.add(info);
            }

            rs.close();
            stmt.close();
            conn.close();
        } catch (SQLException e) {
            e.printStackTrace();
        }

        Gson gson = new Gson();
        String jsOnResult= gson.toJson(list);
        out.print(jsonResult);
    }
}