您好,欢迎访问一九零五行业门户网

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> <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分页实例介绍(附效果图)。
其它类似信息

推荐信息