json實現jsp分頁實例介紹(附效果圖)

2024-09-05 00:17:45

字體：大中小

來源：轉載

供稿：網友

json 在上篇文章已有詳細介紹，json的既簡單易懂，又傳輸迅速。并且能和javascript很好的融為一體。
在不需要添加jar的前提下，能夠很好完成jsp分頁問題。
下面具體介紹分頁實例：

效果如圖所示，采用jsp+servlet技術
首先：編寫一個javaBean User.java

復制代碼代碼如下:www.CuoXIn.com

 
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，并將所有數據封裝

復制代碼代碼如下:www.CuoXIn.com

[{},{},{}]

3.將此字符串返回到請求頁面

復制代碼代碼如下:www.CuoXIn.com

 
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，然后得到相應的字符串

復制代碼代碼如下:www.CuoXIn.com

 
var mgs = xmlHttpRequest.responseText; 
var persons = mgs.evalJSON(); 

將json數據解析并添加到顯示的區域

復制代碼代碼如下:www.CuoXIn.com

 
<%@ 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哦

復制代碼代碼如下:www.CuoXIn.com

 
<script type="text/javascript" src="js/prototype1.6.js"></script> 
<script type="text/javascript" src="js/jquery-1.4.4.js"></script> 

上一篇：從textarea中獲取數據之后按原樣顯示實現代碼

下一篇：Servlet+Jsp實現圖片或文件的上傳功能具體思路及代碼

學習交流

如何查找有故障的配件

如何查找有故障的配件...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注

新聞熱點

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遺憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 媽媽：高考雖重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回應是否會直播帶貨：有人出100萬想和他合作！

2024-06-25 19:29:23

名校搶人名場面：清華、北大太拼了！

2024-06-25 19:22:14

男生高考語文滿分！網友：第一次聽說

2024-06-25 19:19:15

疑難解答

圖片精選

網友關注