Home > Article > Web Front-end > Introduction to json implementation of jsp paging examples

Introduction to json implementation of jsp paging examples

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

json has been introduced in detail in the previous article. JSON is easy to understand and fast to transmit. And it can be integrated well with javascript.
The jsp paging problem can be solved very well without adding jar.
The following is a detailed introduction to paging examples:

##The effect is as shown in the figure, using jsp+servlet technology

First: write a 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() { 
//{&#39;id&#39;:1,&#39;name&#39;:&#39;zhangsan&#39;,&#39;password&#39;:&#39;123&#39;,&#39;age&#39;:1} 
return "{&#39;id&#39;:"+id+",&#39;name&#39;:&#39;"+name+"&#39;,&#39;password&#39;:&#39;"+password+"&#39;,&#39;age&#39;:"+age+"}"; 
} 

}

What you need to pay attention to here is the change of toString method

Then: let’s write its control layer and Dao layer
In order to simplify the code and facilitate value acquisition, the database is temporarily written as a collection
You can see To,
1.service receives the request request to get the current page to be displayed (page page)
2.Create a string, add the user obtained from the database DB in sequence, and encapsulate all data

[{},{},{}]

3. Return this string to the request page

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

After filling in the jsp, submit the page asynchronously through ajax, and then get the corresponding string

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

Convert json The data is parsed and added to the displayed area

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

In addition: these two js are required

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

More examples of json implementation of jsp paging (attached) Renderings) Please pay attention to the PHP Chinese website for related articles!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：A brief analysis of jsp reading database to implement paging technologyNext article：A brief analysis of jsp reading database to implement paging technology

See more

Introduction to json implementation of jsp paging examples

Related articles