java中点击加载更多，用ajax+ssh实现异步加载更多数据

时间：2022-12-22 20:53:37

这篇文章适合刚开始研究异步加载更多数据的小白，我也是今天在项目中遇到客户需求，才研究了一下，在这里写下自己的想法和实现过程。这篇文章完全是为了说明异步加载数据的简单例子，之后还需要完善。

首先想要异步加载数据，首先就应该想到使用的是ajax，这次我写的就是ajax+SSH。

在我们点击一次加载更多之后，在原来的数据后追加固定条数的数据，在点击再追加，直到这一次点击所加载的数据数量少于每次加载数量时，就隐藏掉加载更多功能，然后显示没有更多数据。所以在这个过程中，点击加载更多的次数是最为重要的，控制我们所显示的数据。

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!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>加载更多test</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var clickNum = 0;
function page(){
	clickNum++;
	$.ajax({
		type:"post",
		url:"page.action",
		data:{"clickNum":clickNum},
		dataType:"json",
		success:function(data){
			//解析data，users数组信息
			for(var i=0;i<data.length;i++){
				var id = data[i].userId;
				var name = data[i].userName;
				//创建一个li元素
				var sli = "<li>"+id+" "+name+"</li>";
				//添加到ul中
				$("#users").append(sli);
			}
			// 当查询结果数量少于每夜固定数量，加载更多功能隐藏，并提示用户没有更多数据
			if(data.length < 10){
				$("#page").hide();
				$("#info").show();
			}
		}
	});
}
</script>
</head>
<body>
<ul id="users">
</ul>
<div onclick="page()" id="page"><p>加载更多</p></div>
<div id="info" style="display: none;"><p>没有更多数据</p></div>
</body>
</html>

Controller层

package com.bjpowernode.actions;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;
import org.apache.struts2.convention.annotation.Action;
import org.springframework.stereotype.Controller;

import com.bjpowernode.beans.User;
import com.bjpowernode.service.UserService;

import net.sf.json.JSONArray;

@Controller
public class PageTestAction {

	/** 点击次数 */
	private int clickNum;
	
	/** 每一次加载数据的数量 */
	private final int count = 10;
	
	@Resource
	private UserService userService;

	/**
	 * @param clickNum the clickNum to set
	 */
	public void setClickNum(int clickNum) {
		this.clickNum = clickNum;
	}

	@Action(value="page")
	public void page() throws IOException {
		
		int start = clickNum * count;

		List<Object> result = userService.findPageUser(start, count);

		// list类型转换
		List<User> users = changeType(result);

		// 结果返回
		JSONArray json = JSONArray.fromObject(users);
		
		String str = json.toString();
		HttpServletResponse responnse = ServletActionContext.getResponse();
		responnse.setCharacterEncoding("UTF-8");
		responnse.getWriter().write(str); 
	}
	
	private List<User> changeType(List<Object> result){
		
		List<User> userList = new ArrayList<User>();
		for(int i = 0; i < result.size(); i++) {
			Object[] object = (Object[])result.get(i);
			User user = new User();
			user.setUserId((String)object[0]);
			user.setUserName((String)object[8]);
			userList.add(user);
		}
		return userList;
	}
}

service层接口：

public interface UserService {

	/**
	 * 分页查询数据库内容
	 * @param start 开始位置
	 * @param count 查询数量
	 * @return Object类型list
	 */
	public List<Object> findPageUser(int start, int count);
}

service实现：

	@Override
	public List<Object> findPageUser(int start, int count) {
		return useDao1.findPageUser(start, count);
	}

dao层接口：

	
	/**
	 * 分页查询数据库内容
	 * @param start 开始位置
	 * @param count 查询数量
	 * @return Object类型list
	 */
	public List<Object> findPageUser(int start, int count);
dao层实现 
	@Override
	public List<Object> findPageUser(int start, int count) {

		session = getSession();

		// 查询SQL
		String sql = " select * from user order by userId desc limit ?,?";

		SQLQuery query = session.createSQLQuery(sql);
		// 分页开始位置
		query.setInteger(0, start);
		// 查询数量
		query.setInteger(1, count);

		@SuppressWarnings("unchecked")
		List<Object> result = query.list();

		return result;
	}

userbean：

package com.bjpowernode.beans;

import java.util.Date;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.Id;
import javax.persistence.Temporal;
import javax.persistence.TemporalType;

@Entity
public class User {

	/** 用户id */
	@Id
	@Column(name = "userId", length = 11)
	private String userId;

	/** 用户名 */
	@Column(name = "userName", length = 50)
	private String userName;

	/** 用户密码 */
	@Column(name = "passWord", length = 50)
	private String passWord;

	/** 账号暂停标记 */
	@Column(name = "stopFlg", length = 1)
	private int stopFlg;

	/** 删除标记 */
	@Column(name = "delFlg", length = 1)
	private int delFlg;

	/** 登录者 */
	@Column(name = "regId", length = 1)
	private String regId;

	/** 登录时间 */
	@Column(name = "regTime", length = 13)
	@Temporal(TemporalType.TIMESTAMP)
	private Date regTime;

	/** 更新者 */
	@Column(name = "updId", length = 11)
	private String updId;

	/** 更新时间 */
	@Column(name = "updTime", length = 13)
	@Temporal(TemporalType.TIMESTAMP)
	private Date updTime;

	public User() {

	}

	public User(String userId, String userName, String passWord, int stopFlg, int delFlg, String regId, Date regTime,
			String updId, Date updTime) {
		super();
		this.userId = userId;
		this.userName = userName;
		this.passWord = passWord;
		this.stopFlg = stopFlg;
		this.delFlg = delFlg;
		this.regId = regId;
		this.regTime = regTime;
		this.updId = updId;
		this.updTime = updTime;
	}

	/**
	 * @return the userId
	 */
	public String getUserId() {
		return userId;
	}

	/**
	 * @param userId the userId to set
	 */
	public void setUserId(String userId) {
		this.userId = userId;
	}

	/**
	 * @return the userName
	 */
	public String getUserName() {
		return userName;
	}

	/**
	 * @param userName the userName to set
	 */
	public void setUserName(String userName) {
		this.userName = userName;
	}

	/**
	 * @return the passWord
	 */
	public String getPassWord() {
		return passWord;
	}

	/**
	 * @param passWord the passWord to set
	 */
	public void setPassWord(String passWord) {
		this.passWord = passWord;
	}

	/**
	 * @return the stopFlg
	 */
	public int getStopFlg() {
		return stopFlg;
	}

	/**
	 * @param stopFlg the stopFlg to set
	 */
	public void setStopFlg(int stopFlg) {
		this.stopFlg = stopFlg;
	}

	/**
	 * @return the delFlg
	 */
	public int getDelFlg() {
		return delFlg;
	}

	/**
	 * @param delFlg the delFlg to set
	 */
	public void setDelFlg(int delFlg) {
		this.delFlg = delFlg;
	}

	/**
	 * @return the regId
	 */
	public String getRegId() {
		return regId;
	}

	/**
	 * @param regId the regId to set
	 */
	public void setRegId(String regId) {
		this.regId = regId;
	}

	/**
	 * @return the regTime
	 */
	public Date getRegTime() {
		return regTime;
	}

	/**
	 * @param regTime the regTime to set
	 */
	public void setRegTime(Date regTime) {
		this.regTime = regTime;
	}

	/**
	 * @return the updId
	 */
	public String getUpdId() {
		return updId;
	}

	/**
	 * @param updId the updId to set
	 */
	public void setUpdId(String updId) {
		this.updId = updId;
	}

	/**
	 * @return the updTime
	 */
	public Date getUpdTime() {
		return updTime;
	}

	/**
	 * @param updTime the updTime to set
	 */
	public void setUpdTime(Date updTime) {
		this.updTime = updTime;
	}

	/* (non-Javadoc)
	 * @see java.lang.Object#toString()
	 */
	@Override
	public String toString() {
		return "User [userId=" + userId + ", userName=" + userName + ", passWord=" + passWord + ", stopFlg=" + stopFlg
				+ ", delFlg=" + delFlg + ", regId=" + regId + ", regTime=" + regTime + ", updId=" + updId + ", updTime="
				+ updTime + "]";
	}
}

最后上传一组结果图片：

初始

java中点击加载更多，用ajax+ssh实现异步加载更多数据

点击加载更多


java中点击加载更多，用ajax+ssh实现异步加载更多数据

再点一次

java中点击加载更多，用ajax+ssh实现异步加载更多数据

以上仅供参考，谢谢。

标签：

相关文章