json实现jsp分页实例介绍(附效果图)

　　json 在上篇文章已有详细介绍，json的既简单易懂，又传输迅速。并且能和javascript很好的融为一体。

　　在不需要添加jar的前提下，能够很好完成jsp分页问题。

　　下面具体介绍分页实例：

　　效果如图所示，采用jsp+servlet技术

　　首先：编写一个javaBean User.java

复制代码代码如下:

　　package bean;

　　public class User {

　　private int id;

　　private String name;

　　private String password;

　　private int age;

　　public User() {

　　super();

　　}

　　public User(int id, String name, String password, int age) {

　　super();

　　this.id = id;

　　this.name = name;

　　this.password = password;

　　this.age = age;

　　}

　　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;

　　}

　　public String getPassword() {

　　return password;

　　}

　　public void setPassword(String password) {

　　this.password = password;

　　}

　　public int getAge() {

　　return age;

　　}

　　public void setAge(int age) {

　　this.age = age;

　　}

　　@Override

　　public String toString() {

　　//{'id':1,'name':'zhangsan','password':'123','age':1}

　　return "{'id':"+id+",'name':'"+name+"','password':'"+password+"','age':"+age+"}";

　　}

　　这里需要注意的就是 toString的方法的改变

　　然后：我们来编写它的control 层和Dao层

　　为了简化代码，便于取值，数据库暂写为一个集合

　　可以看到，

　　1.service 接收request请求得到页面所要展示当前页（为第page页）

　　2.创建一个字符串，向内依次添加从数据库DB 得到的user，并将所有数据封装

复制代码代码如下:

　　[{},{},{}]

　　3.将此字符串返回到请求页面

复制代码代码如下:

　　package servlet;

　　import java.io.IOException;

　　import java.io.PrintWriter;

　　import java.util.LinkedList;

　　import java.util.List;

　　import javax.servlet.ServletException;

　　import javax.servlet.http.HttpServlet;

　　import javax.servlet.http.HttpServletRequest;

　　import javax.servlet.http.HttpServletResponse;

　　import bean.User;

　　public class Paging extends HttpServlet {

　　public static final int PER_PAGE = 3;

　　@Override

　　protected void service(HttpServletRequest request, HttpServletResponse response)

　　throws ServletException, IOException {

　　//分页数据源当前得到第几页的记录每页显示多少条

　　int page = Integer.parseInt(request.getParameter("page"));

　　// page = 1 i = 0

　　//page = 2 3

　　int length = 0;//记录当前拿了多少条

　　StringBuffer sb = new StringBuffer();

　　sb.append("[");

　　//[{},{},{}]

　　String message = null;

　　if(page >= 1 && page <= 3){

　　for (int i = (page-1)*PER_PAGE; i < DB.list.size()&&length < PER_PAGE; i++) {

　　User u = DB.list.get(i);

　　sb.append(u.toString()+",");

　　length++;

　　}

　　if(length > 0){

　　message = sb.substring(0, sb.length()-1)+"]";

　　}else{

　　message = sb.toString()+"]";

　　}

　　}else{

　　response.setContentType("text/html;charset=utf-8");

　　response.getWriter().println("捣乱");

　　return;

　　}

　　response.setContentType("text/html;charset=utf-8");

　　response.getWriter().println(message);

　　}

　　class DB{

　　public static List<User> list = new LinkedList<User>();

　　static{

　　list.add(new User(1,"zhangsan","zs",34));

　　list.add(new User(2,"lisi","ls",34));

　　list.add(new User(3,"a","h",34));

　　list.add(new User(4,"b","d",34));

　　list.add(new User(5,"c","g",34));

　　list.add(new User(6,"d","a",34));

　　list.add(new User(7,"e","d",34));

　　list.add(new User(8,"f","e",34));

　　list.add(new User(9,"g","a",34));

　　}

　　之后：jsp的填写，通过ajax异步提交page，然后得到相应的字符串

复制代码代码如下:

　　var mgs = xmlHttpRequest.responseText;

　　var persons = mgs.evalJSON();

　　将json数据解析并添加到显示的区域

复制代码代码如下:

　　<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

　　String path = request.getContextPath();

　　String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

　　<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

　　<html>

　　<head>

　　<title>My JSP 'regist.jsp' starting page</title>

　　var paging = 0;

　　function page(p){

　　/*if(p == 'next' && paging < 3){

　　paging ++;

　　}else if(p == 'last' && paging > 1) {

　　paging --;

　　}else{

　　alert('错误');

　　}*/

　　if(p == 'next' && paging < 3){

　　paging ++;

　　if(paging > 1){

　　$(":button:eq(0)").removeAttr('disabled');

　　}

　　if(paging == 3){

　　$(":button:eq(1)").attr('disabled','disabled');

　　}

　　}else if(p == 'last' && paging > 1){

　　paging --;

　　$(":button:eq(1)").removeAttr('disabled');

　　if(paging == 1){

　　$(":button:eq(0)").attr('disabled','disabled');

　　}

　　createXmlHttpRequest();

　　xmlHttpRequest.onreadystatechange=back;

　　var url = encodeURI("/json_page/Paging?page="+paging);

　　xmlHttpRequest.open("GET",url,true);

　　xmlHttpRequest.send(null);

　　}

　　//假设名字为xmlHttpRequest

　　function createXmlHttpRequest(){

　　if(window.ActiveXObject){

　　xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");

　　}else{

　　xmlHttpRequest = new XmlHttpRequest();

　　}

　　//回调函数

　　function back(){

　　if( xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){

　　var mgs = xmlHttpRequest.responseText;

　　var persons = mgs.evalJSON();

　　//alert(mgs);

　　$("table").empty();

　　$("table").append( $("<tr><td>id</td><td>用户名</td><td>密码</td><td>age</td></tr>"));

　　for(var i = 0 ; i < persons.length;i++){

　　var person = persons[i];

　　var $tr = $("<tr><td>"+person.id+"</td><td>"+person.name+"</td><td>"+person.password+"</td><td>"+person.age+"</td></tr>");

　　$("table").append($tr);

　　}

　　</script>

　　</head>

　　<body>

　　<table>

　　</table>

　　</body>

　　</html>

　　另外：要有这两个js哦

复制代码代码如下:

教程首页更多教程