Heim  >  Artikel  >  Web-Frontend  >  Einführung in die JSON-Implementierung von JSP-Paging-Beispielen

Einführung in die JSON-Implementierung von JSP-Paging-Beispielen

高洛峰
高洛峰Original
2016-12-29 15:22:08940Durchsuche

json wurde im vorherigen Artikel ausführlich vorgestellt. Json ist leicht zu verstehen und schnell zu übertragen. Und es lässt sich gut mit Javascript integrieren.
Ohne das Hinzufügen von jar kann das JSP-Paging-Problem sehr gut gelöst werden.
Im Folgenden finden Sie eine detaillierte Einführung in Paging-Beispiele:

Einführung in die JSON-Implementierung von JSP-Paging-Beispielen

Der Effekt ist wie in der Abbildung gezeigt, unter Verwendung der JSP + Servlet-Technologie
Zuerst: Schreiben Sie eine 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+"}"; 
} 

}

Was hier beachtet werden muss, ist die Änderung in der toString-Methode
Dann: Schreiben wir seine Kontrollschicht und Dao-Schicht
Um den Code zu vereinfachen und den Wert zu erleichtern Bei der Erfassung wird die Datenbank vorübergehend als Sammlung geschrieben
Wie Sie sehen können,
1.service empfängt die Anforderungsanforderung und ruft die aktuell anzuzeigende Seite (Seite) ab
2 Erstellen Sie eine Zeichenfolge und fügen Sie sie hinzu Der Benutzer erhält nacheinander aus der Datenbank DB und fügt alle Daten hinzu. Kapseln Sie

[{},{},{}]

3. Geben Sie diese Zeichenfolge an die Anforderungsseite zurück

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

: Füllen Sie das JSP aus und senden Sie es ab Bearbeiten Sie die Seite asynchron über Ajax und rufen Sie dann die entsprechende Zeichenfolge ab

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

JSON-Daten analysieren und zum angezeigten Bereich hinzufügen

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

Außerdem: Sie benötigen diese beiden Js

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


Weitere Beispiele für die JSON-Implementierung von JSP-Paging (mit Renderings) und verwandte Artikel finden Sie auf der chinesischen PHP-Website!


Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn