Introduction à l'implémentation json d'exemples de pagination jsp

json a été présenté en détail dans l'article précédent. json est facile à comprendre et rapide à transmettre. Et il peut être bien intégré avec javascript.
Sans ajouter de jar, le problème de pagination jsp peut être très bien résolu.
Ce qui suit est une introduction détaillée aux exemples de pagination :

L'effet est tel que montré dans la figure, en utilisant la technologie de servlet jsp
Premièrement : écrivez un utilisateur javaBean .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+"}"; 
} 

}

Ce qu'il faut noter ici, c'est le changement dans la méthode toString
Ensuite : écrivons sa couche de contrôle et sa couche Dao
Afin de simplifier le code et de faciliter l'acquisition de valeur , la base de données est temporairement écrite sous forme de collection
Vous pouvez voir,
1.service reçoit la demande de requête et obtient la page actuelle à afficher (page page)
2 Créez une chaîne, ajoutez l'utilisateur. obtenu à partir de la base de données DB dans l'ordre et encapsuler toutes les données

[{},{},{}]

3. Renvoyez cette chaîne à la page de requête

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)); 
} 
}

Après : remplissez le jsp, soumettez la page de manière asynchrone. via ajax, puis récupérez la chaîne correspondante

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

Analysez et ajoutez des données json à la zone affichée

<%@ 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 &#39;regist.jsp&#39; 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 == &#39;next&#39; && paging < 3){ 
paging ++; 
}else if(p == &#39;last&#39; && paging > 1) { 
paging --; 
}else{ 
alert(&#39;错误&#39;); 
}*/ 
if(p == &#39;next&#39; && paging < 3){ 
paging ++; 
if(paging > 1){ 
$(":button:eq(0)").removeAttr(&#39;disabled&#39;); 
} 
if(paging == 3){ 
$(":button:eq(1)").attr(&#39;disabled&#39;,&#39;disabled&#39;); 
} 
}else if(p == &#39;last&#39; && paging > 1){ 
paging --; 
$(":button:eq(1)").removeAttr(&#39;disabled&#39;); 
if(paging == 1){ 
$(":button:eq(0)").attr(&#39;disabled&#39;,&#39;disabled&#39;); 
} 
} 
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(&#39;last&#39;);"/><input type="button" value="下一页" onclick = "page(&#39;next&#39;);"/> 
<table> 
<tr><td>id</td><td>用户名</td><td>密码</td><td>age</td></tr> 
</table> 
</body> 
</html>

De plus : vous avez besoin de ces deux js

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

Pour plus d'exemples d'implémentation json de pagination jsp (avec rendus) et d'articles connexes, veuillez faire attention au site Web PHP chinois !