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;}@Overridepublic 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;@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {//分頁 資料來源 當前得到第幾頁的記錄 每頁顯示多少條int page = Integer.parseInt(request.getParameter("page"));// page = 1 i = 0//page = 2 3int 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> <base href="<%=basePath%>"> <title>My JSP 'regist.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><script type="text/javascript" src="js/prototype1.6.js"></script><script type="text/javascript" src="js/jquery-1.4.4.js"></script><script type="text/javascript"> 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> <input type="button" disabled="disabled" value="上一頁" onclick="page('last');"/><input type="button" value="下一頁" onclick = "page('next');"/> <table> <tr><td>id</td><td>使用者名稱</td><td>密碼</td><td>age</td></tr> </table> </body></html>
另外：要有這兩個js哦
<script type="text/javascript" src="js/prototype1.6.js"></script><script type="text/javascript" src="js/jquery-1.4.4.js"></script>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
