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

时间:2021-03-18 人气:0

想了解json实现jsp分页实例介绍(附效果图)的相关内容吗，在本文为您仔细讲解json 分页的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：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> 

加载全部内容