客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
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> |
请发表评论