前端实现下拉自动刷新数据-优快云博客

本文链接：https://blog.youkuaiyun.com/RANJIANGCHENG/article/details/80113071

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

直接上代码：

<%@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};
$.getJSON(url,args,function(data){
for(var i=0;i<data.message.length;i++)
{
var h1=document.createElement("H1");
var textnode=document.createTextNode(data.message[i]);
h1.appendChild(textnode);
content.appendChild(h1);
}
currentpage++;
});
}
});
});
</script>
</head>
<body>
<div id="content" style="width: 100%;height: 1000px;"></div>
</body>
</html>

后端处理servlet:

package com.js.test;

import java.io.IOException;
import java.io.PrintWriter;
import java.lang.reflect.Method;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletContext;
import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;

public class NewsList extends HttpServlet implements ServletContextListener{

private static final long serialVersionUID = 1L;

@Override
public void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doPost(req, resp);
}

@Override
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String str=request.getServletPath();
int index=str.lastIndexOf("/");
int end=str.lastIndexOf(".");
String methodname=str.substring(index+1, end);
Class<? extends NewsList> cla=this.getClass();
Method[] method=cla.getMethods();
for(Method m:method)
{
if(m.getName().equals(methodname))
{
try {
m.invoke(this, request,response);
} catch (Exception e) {
System.out.println("调用错误");
}
}
}
}

public void updatemessage(HttpServletRequest request,HttpServletResponse response) throws IOException
{
int currentpage=Integer.parseInt(request.getParameter("currentpage"));
int start=currentpage*100;
List<String> page_list=new ArrayList<String>();
Map<String, List<String>> info=new HashMap<String,List<String>>();
@SuppressWarnings("unchecked")
List<String> message=(List<String>) request.getServletContext().getAttribute("message");
if(message==null)
{
page_list.add("获取数据失败");
}else if(currentpage==10){
page_list.add("没有更多数据啦");
}else
{
page_list=message.subList(start, start+100);
}
info.put("message", page_list);
JSONObject array=JSONObject.fromMap(info);
response.setContentType("application/json");
response.setCharacterEncoding("utf-8");
PrintWriter out= response.getWriter();
out.print(array);
out.flush();
}

public void Ready_message(ServletContext application)
{
List<String> news=new ArrayList<String>();
for(int i=0;i<1000;i++)
{
String str="这是第"+i+"条信息";
news.add(str);
}
application.setAttribute("message", news);
}

@Override
public void contextDestroyed(ServletContextEvent arg0) {
System.out.println("应用关闭");
}

@Override
public void contextInitialized(ServletContextEvent arg0) {
Ready_message(arg0.getServletContext());
System.out.println("应用创建完成");

}

}

由于没有从数据库中查询数据，所以这儿在应用启动的时候，先创建了一下数据，后面每次的翻页请求都从这些数据中获取。