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> <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>
更多json實現jsp分頁實例(附文章請關注PHP中文網!