json實現jsp分頁

來源:互聯網
上載者:User

 

json 在上篇文章已有詳細介紹,json的既簡單易懂,又傳輸迅速。並且能和javascript很好的融為一體。

 

在不需要添加jar的前提下,能夠很好完成jsp分頁問題。

下面具體介紹分頁執行個體:

效果,採用jsp+servlet技術

首先:編寫一個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;}@Overridepublic 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,並將所有資料封裝

[{},{},{}]

 

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

 

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;@Overrideprotected void service(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {//分頁     資料來源    當前得到第幾頁的記錄    每頁顯示多少條int page = Integer.parseInt(request.getParameter("page"));// page = 1   i = 0//page = 2 3int 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,然後得到相應的字串

 

 

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

將json資料解析 並添加到顯示的地區

 

 

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

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

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.