下拉自动刷新数据

最新推荐文章于 2023-08-01 15:49:22 发布

RANJIANGCHENG

最新推荐文章于 2023-08-01 15:49:22 发布

阅读量1.2k

点赞数 1

分类专栏： java动态 java 分页

本文链接：https://blog.csdn.net/RANJIANGCHENG/article/details/80113071

版权

本文介绍如何在前端实现下拉自动刷新数据的功能，提供更人性化的用户体验。通过示例代码展示了后端servlet的处理方式。

摘要由CSDN通过智能技术生成

当有多条信息需要在前端展示的时候，通常的做法是做成翻页列表的形式，下拉自动刷新是翻页显示的一种，但是相较于传统的方式要更加人性化，所以今天就实现了一下下拉自动刷新的翻页形式。

直接上代码：

<%@page import="java.util.List"%>
<%@page import="java.util.ArrayList"%>
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
var currentpage=0;
var total_page=0;
$(function(){
$(window).scroll(function(){
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
if(scrollTop + windowHeight == scrollHeight){
var content=document.getElementById("content");
var url="/js_pro/updatemessage.action";
var args={"currentpage":currentpage};