Spring+MyBatis+Ajax 实现无刷新分页

1.导入相关jar:放在文章尾部

2.环境搭建，编写相关配置文件：

web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
		 xmlns="http://java.sun.com/xml/ns/javaee" 
		 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
		 					 http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>AjaxPage</display-name>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
  
  <!-- 上下文参数 -->
  <context-param>
  	<param-name>contextConfigLocation</param-name>
  	<param-value>classpath:applicationContext.xml</param-value>
  </context-param>
  
  <!-- 监听器 把spring核心配置文件信息装载到applicationContext -->
  <listener>
  	<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>

	

</web-app>

applicationContext.xml：

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xmlns:aop="http://www.springframework.org/schema/aop"
	xmlns:tx="http://www.springframework.org/schema/tx" 
	xmlns:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/aop
        http://www.springframework.org/schema/aop/spring-aop.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context.xsd
        http://www.springframework.org/schema/tx
        http://www.springframework.org/schema/tx/spring-tx.xsd" default-autowire="byName">
        
        <!-- 扫描组件，扫描注解 -->
        <context:component-scan base-package="com.tao.service.impl"></context:component-scan>
        
        <!-- 加载属性配置文件 -->
        <context:property-placeholder location="classpath:db.properties"/>
        
        <!-- 数据源 -->
        <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
        	<property name="driverClassName" value="${jdbc.driver}"></property>
	    	<property name="url" value="${jdbc.url}"></property>
	    	<property name="username" value="${jdbc.username}"></property>
	    	<property name="password" value="${jdbc.password}"></property>
        </bean>
        
        <!-- 创建SqlSessionFactory -->
        <bean id="factory" class="org.mybatis.spring.SqlSessionFactoryBean">
			<property name="typeAliasesPackage" value="com.tao.pojo"></property>
        </bean>
        
        <!-- 扫描器 -->
        <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        	<property name="basePackage" value="com.tao.mapper"></property>
        	<!-- 如果不使用这个属性会调用属性文件加载不到 -->
        	<property name="sqlSessionFactoryBeanName" value="factory"></property>
        </bean>
        
        <!-- 配置事务管理器 -->
        <bean id="txManage" class="org.springframework.jdbc.datasource.DataSourceTransactionManager"></bean>
        
         <!-- 配置声明式事务 -->
         <tx:advice id="txAdvice" transaction-manager="txManage">
			<tx:attributes>
				<tx:method name="ins*"/>
				<tx:method name="upd*"/>
				<tx:method name="del*"/>
				<tx:method name="*" read-only="true"/>
			</tx:attributes>
         </tx:advice>
		
		 <!-- 配置aop --> 
		 <aop:config>
		 	<aop:pointcut expression="execution(* com.tao.service.impl.*.*(..))" id="mypoint"/>
		 	<aop:advisor advice-ref="txAdvice" pointcut-ref="mypoint"/>
		 </aop:config>
		 
		 <!-- 表示使用cglib动态代理  注解这块都是基于cglib做的-->
        <aop:aspectj-autoproxy proxy-target-class="true"></aop:aspectj-autoproxy>
        
</beans>

db.properties：

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url = jdbc:mysql://localhost:3306/ssm
jdbc.username = root
jdbc.password = root

实体类：

package com.tao.pojo;

public class Dept {
	
	private int id;
	private String name;
	
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
}

package com.tao.pojo;

public class Emp {
	
	private int id;
	private String empno;
	private String name;
	private int deptid;
	private Dept dept;
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getEmpno() {
		return empno;
	}
	public void setEmpno(String empno) {
		this.empno = empno;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getDeptid() {
		return deptid;
	}
	public void setDeptid(int deptid) {
		this.deptid = deptid;
	}
	public Dept getDept() {
		return dept;
	}
	public void setDept(Dept dept) {
		this.dept = dept;
	}
}

package com.tao.pojo;

import java.util.List;

public class PageInfo {
	
	private int pageSize;
	private int pageNumber;
	private long total;
	private List<?> list;
	public int getPageSize() {
		return pageSize;
	}
	public void setPageSize(int pageSize) {
		this.pageSize = pageSize;
	}
	public int getPageNumber() {
		return pageNumber;
	}
	public void setPageNumber(int pageNumber) {
		this.pageNumber = pageNumber;
	}
	public long getTotal() {
		return total;
	}
	public void setTotal(long total) {
		this.total = total;
	}
	public List<?> getList() {
		return list;
	}
	public void setList(List<?> list) {
		this.list = list;
	}
	
}

数据层接口及映射文件：

package com.tao.mapper;

import java.util.List;

import com.tao.pojo.Emp;

public interface EmpMapper {
	
	//查询员工及其部门
	List<Emp> selByPage(int pageStart,int pageSize);

	//查询员工总记录数
	long selCount();
	
}

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.tao.mapper.EmpMapper">
	<!-- property 表示实体类中定义的名称 column查询数据库返回的列名 也可以自己起别名  -->
	<resultMap type="Emp" id="empMap">
		<id column="id" property="id"/>
		<result column="empno" property="empno"/>
		<result column="name" property="name"/>
		<result column="deptid" property="deptid"/>
		<association property="dept" javaType="Dept" resultMap="deptMap" />
	</resultMap>
	
	<resultMap type="Dept" id="deptMap">
		<id property="id" column="did"/>
		<id property="name" column="dname"/>
	</resultMap>

	<select id="selByPage" resultMap="empMap">
		select e.*,d.id as did,d.name as dname from emp e left join dept d
		on e.deptid = d.id
		limit #{0},#{1}
	</select>
	
	<select id="selCount" resultType="long" >
		select count(*) from emp
	</select>


</mapper>

关于 association 的使用，也有其他的写法 自己弄懂 会写就行

业务层及其实现类：

package com.tao.service;

import com.tao.pojo.PageInfo;

public interface EmpService {
	
	PageInfo show(int pageSize,int pageNumber);

}

package com.tao.service.impl;

import javax.annotation.Resource;

import org.springframework.stereotype.Service;

import com.tao.mapper.EmpMapper;
import com.tao.pojo.PageInfo;
import com.tao.service.EmpService;

@Service
public class EmpServiceImpl implements EmpService{

	@Resource
	private EmpMapper empMapper;
	
	@Override
	public PageInfo show(int pageSize, int pageNumber) {
		PageInfo p = new PageInfo();
		p.setPageSize(pageSize);
		p.setPageNumber(pageNumber);
		p.setList(empMapper.selByPage(pageSize*(pageNumber-1), pageSize));
		long count = empMapper.selCount();
		p.setTotal(count%pageSize==0?count/pageSize:count/pageSize+1);
		return p;
	}

}

控制层：

package com.tao.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.web.context.WebApplicationContext;
import org.springframework.web.context.support.WebApplicationContextUtils;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.tao.pojo.PageInfo;
import com.tao.service.EmpService;
import com.tao.service.impl.EmpServiceImpl;

@WebServlet("/show")
public class ShowServlet extends HttpServlet{
	
	private EmpService empService;
	
	private static final long serialVersionUID = 1L;

	
	@Override
	public void init() throws ServletException {
		//spring在web项目中容器是webApplicationContext
		WebApplicationContext wac = WebApplicationContextUtils.getRequiredWebApplicationContext(getServletContext());
		empService = wac.getBean("empServiceImpl",EmpServiceImpl.class);
	}

	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		resp.setContentType("application/json;charset=utf-8");
		int pageSize = Integer.parseInt(req.getParameter("pageSize"));
		int pageNumber = Integer.parseInt(req.getParameter("pageNumber"));
		
		PageInfo p = empService.show(pageSize, pageNumber);
		PrintWriter out = resp.getWriter();
		
		ObjectMapper objectMapper = new ObjectMapper();
		out.println(objectMapper.writeValueAsString(p));
		out.flush();
		out.close();
	}
	
	
}

index.jsp:

<%@ 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">
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
	var pageSize = 2;
	var pageNumber = 1;
	var total = 0;
	
	//默认调用一次，加载数据
	getMyData();
	
	//上一页
	$("a:eq(0)").click(function(){
		pageNumber = pageNumber-1;
		if(pageNumber>=1){
			getMyData();
		}else{
			pageNumber=1;
		}
		return false;
	});
	
	//下一页
	$("a:eq(1)").click(function(){
		pageNumber = pageNumber+1;
		if(pageNumber<=total){
			getMyData();
		}else{
			pageNumber = total;
		}
		return false;
	});
	
	function getMyData(){
		$.post("show",{"pageNumber":pageNumber,"pageSize":pageSize},function(data){
			//总页数
			total = data.total;
			var result = "";
			for(var i=0;i<data.list.length;i++){
				result+="<tr>";
				result+="<td>"+data.list[i].empno+"</td>";
				result+="<td>"+data.list[i].name+"</td>";
				result+="<td>"+data.list[i].dept.name+"</td>";
				result+="</tr>";
			}
			$("#mytbody").html(result);
		});
	}
})


</script>
<title>Insert title here</title>
</head>
<body>
<table border="1">
	<tr>
		<td>员工编号</td>
		<td>姓名</td>
		<td>所在部门</td>
	</tr>
	<tbody id="mytbody"></tbody>
</table>
<a href="">上一页</a>
<a href="">下一页</a>
</body>
</html>

相关jar: