欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

json实现jsp分页实例介绍

程序员文章站 2023-12-23 12:42:40
...
json 在上篇文章已有详细介绍,json的既简单易懂,又传输迅速。并且能和javascript很好的融为一体。
在不需要添加jar的前提下,能够很好完成jsp分页问题。
下面具体介绍分页实例:

json实现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中文网!

相关标签: json jsp分页

上一篇:

下一篇: