当前位置:  编程技术>java/j2ee

json实现jsp分页实例介绍(附效果图)

    来源: 互联网  发布时间:2014-10-19

    本文导语:  json 在上篇文章已有详细介绍,json的既简单易懂,又传输迅速。并且能和javascript很好的融为一体。 在不需要添加jar的前提下,能够很好完成jsp分页问题。 下面具体介绍分页实例: 效果如图所示,采用jsp+servlet技术 首先:编...

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 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 list = new LinkedList();
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数据解析 并添加到显示的区域
代码如下:







My JSP 'regist.jsp' starting page








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( $("id用户名密码age"));
for(var i = 0 ; i < persons.length;i++){
var person = persons[i];
var $tr = $(""+person.id+""+person.name+""+person.password+""+person.age+"");
$("table").append($tr);
}
}
}





id用户名密码age




另外:要有这两个js哦
代码如下:




    
 
 

您可能感兴趣的文章:

  • 基于Jquery+Ajax+Json实现分页显示附效果图
  • php解析json数据实例
  • C#解析JSON实例
  • python解析json实例方法
  • php使用curl发送json格式数据实例
  • jquery的ajax异步请求接收返回json数据实例
  • Android访问php取回json数据实例
  • C# XML与Json之间相互转换实例详解
  • JQuery处理json与ajax返回JSON实例代码
  • java json 省市级联实例代码
  • Android 解析JSON对象及实例说明
  • C#实现对Json字符串处理实例
  • jQuery解析JSON数据实例详解
  • C#实现json的序列化和反序列化实例代码
  • Jquery解析json数据的实例详解
  • c#处理3种json数据的实例
  • jquery处理json数据实例分析
  • ajax+json+Struts2实现list传递实例讲解
  • java反射实现javabean转json实例代码
  • JQuery解析HTML、JSON和XML实例详解
  • jQuery内置的AJAX功能和JSON的使用实例
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • JQuery实现table行折叠效果以JSON做数据源
  • Python中实现json字符串和dict类型的互转
  • 高性能JSON库 commons.json
  • Python namedtuple对象json序列化/反序列化及对象恢复
  • JSON标签库 JSON-taglib
  • json用法小结 json数据格式
  • PHP的JSON开发包 Services_JSON
  • Symbian上的JSON解析库 s60-json-library
  • JSON压缩算法 JSON.hpack
  • JSON改进版 JSON5
  • 把JSON转换成CSV json2csv
  • JSON-RPC框架 JSON-RPC-Java
  • JSON处理类库 json-smart
  • json数据的列循环 JS循环遍历JSON数据
  • jQuery的JSON插件 JSON Parser
  • Symbian上的JSON解析库 s-json
  • C++的JSON开发包 knl-json
  • jQuery.parseJSON(json)将JSON字符串转换成js对象
  • Jquery通过JSON字符串创建JSON对象
  • QT的json库 LomoX Json 4QT
  • JSON-RPC的框架 json-rpc-for-java
  • 浅析php中json_encode()和json_decode()


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3