Introduction to jsp paging instances in json format (with effect diagram)

Json is easy to understand and fast to transmit. And can be well integrated with javascript.
Without adding jar, jsp paging can be well completed.
The following describes paging instances:

Effect: jsp + servlet Technology
First: Write A javaBean User. java Copy codeThe Code is as follows: 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': 'hangsan ', 'Password': '000000', 'age': 1}
Return "{'id':" + id + ", 'name': '" + name + "', 'Password': '" + password + "', 'age': "+ age + "}";
}

}

Note that the toString method is changed.
Then: Let's write its control layer and Dao layer.
To simplify the code and facilitate the value, the database is temporarily written as a set.
As you can see,
1. The service receives the request. The current page is displayed (the page)
2. Create a string, add the user from the database in turn, and encapsulate all dataCopy codeThe Code is as follows: [{},{},{}]

3. Return this string to the request page.Copy codeThe Code is as follows: package servlet;
Import java. io. IOException;
Import java. io. PrintWriter;
Import java. util. Collections list;
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 {
// The number of records displayed on each page for the paging Data Source
Int page = Integer. parseInt (request. getParameter ("page "));
// Page = 1 I = 0
// Page = 2 3
Int length = 0; // record the number of items currently taken
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 ("mess ");
Return;
}
Response. setContentType ("text/html; charset = UTF-8 ");
Response. getWriter (). println (message );
}
}
Class DB {
Public static List <User> list = new external List <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 ));
}
}

Then, enter the jsp file, submit the page asynchronously through ajax, and obtain the corresponding string.Copy codeThe Code is as follows: var mgs = xmlHttpRequest. responseText;
Var persons = mgs. evalJSON ();

Parse json data and add it to the displayed areaCopy codeThe Code is as follows: <% @ 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 ('error ');
}*/
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 );
}
// Assume the name is xmlHttpRequest.
Function createXmlHttpRequest (){
If (window. ActiveXObject ){
XmlHttpRequest = new ActiveXObject ("Microsoft. XMLHTTP ");
} Else {
XmlHttpRequest = new XmlHttpRequest ();
}
}
// Callback function
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> User Name </td> <td> password </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 = "Previous page" onclick = "page ('last '); "/> <input type =" button "value =" next page "onclick =" page ('Next'); "/>
<Table>
<Tr> <td> id </td> <td> User Name </td> <td> password </td> <td> age </td> </tr>
</Table>
</Body>
</Html>

In addition, you need to have these two js files.Copy codeThe Code is as follows: <script type = "text/javascript" src = "js/prototype1.6.js"> </script>
<Script type = "text/javascript" src = "js/jquery-1.4.4.js"> </script>