json实现jsp分页实例介绍(附效果图)_JSP教程-查字典教程网
json实现jsp分页实例介绍(附效果图)
json实现jsp分页实例介绍(附效果图)
发布时间:2017-01-07 来源:查字典编辑
摘要:json在上篇文章已有详细介绍,json的既简单易懂,又传输迅速。并且能和javascript很好的融为一体。在不需要添加jar的前提下,能...

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;

}

@Override

public 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;

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

}

}

之后 :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="上一页"/><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>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新JSP教程学习
    热门JSP教程学习
    编程开发子分类