使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页

先给大家展示下运行效果图:

 1.后台action产生json数据

List blackList = blackService.getBlackInfoList(mobileNum, gatewayid, startDate, endDate);
int totalRows = blackList.size();
StringBuffer sb = new StringBuffer();
     sb.append("{\"totalCount\":\""+totalRows+"\",");
     sb.append("\"jsonRoot\":[");
     for (int i=0;i<blackList.size();i++) {
       LBlack blackInfo = (LBlack)blackList.get(i);
       sb.append("{\"id\":\""+ blackInfo.getId());
       sb.append("\",");
       sb.append("\"mobile\":\""+ blackInfo.getMobile());
       sb.append("\",");
       sb.append("\"province\":\""+ blackInfo.getProvince());
       sb.append("\",");
       sb.append("\"gateway\":\""+ blackInfo.getGateway());
       sb.append("\",");
       sb.append("\"insertTime\":\""+ blackInfo.getInsertTime());
       sb.append("\",");
       sb.append("\"remark\":\""+ blackInfo.getRemark());
       sb.append("\"");
       sb.append("},");
     }
     sb.deleteCharAt(sb.lastIndexOf(",")); // 删去最后一个逗号
     sb.append("]}");
     HttpServletResponse response = ServletActionContext.getResponse();
     response.setContentType("text/plain");
     response.getWriter().print(sb); 

   2.struts.xml相关配置

<action name="blackList" class="blackAction" method="blackList">
  <!--plaintext用于显示页面原始代码的结果类型-->
  <result type="plainText">
  <param name="charSet">UTF-8</param>
  <param name="location">/WEB-INF/jsp/manage/black.jsp</param>
  </result>
</action> 

3.js获取json数据分页显示

function getJSONData(pn) {
  // alert(pn);
  $.getJSON("blackList.ce", function(data) {
    var totalCount = data.totalCount; // 总记录数
    var pageSize = 10; // 每页显示几条记录
    var pageTotal = Math.ceil(totalCount / pageSize); // 总页数
    var startPage = pageSize * (pn - 1);
    var endPage = startPage + pageSize - 1;
    var $ul = $("#json-list");
    $ul.empty();
    for (var i = 0; i < pageSize; i++) {
      $ul.append('<li class="li-tag"></li>');
    }
    var dataRoot = data.jsonRoot;
    if (pageTotal == 1) {   // 当只有一页时
      for (var j = 0; j < totalCount; j++) {
        $(".li-tag").eq(j).append("<span class='col1'><input type='checkbox' value='"+parseInt(j + 1)+"'/></span>")
        .append("<span class='col2'>" + parseInt(j + 1)
            + "</span>").append("<span class='col3'>" + dataRoot[j].mobile
            + "</span>").append("<span class='col4'>" + dataRoot[j].province
            + "</span>").append("<span class='col5'>" + dataRoot[j].gateway
            + "</span>").append("<span class='col6'>" + dataRoot[j].insertTime
            + "</span>").append("<span class='col7'>" + dataRoot[j].remark
            + "</span>")
      }
    } else {
      for (var j = startPage, k = 0; j < endPage, k < pageSize; j++, k++) {
        if( j == totalCount){
          break;    // 当遍历到最后一条记录时,跳出循环
        }
        $(".li-tag").eq(k).append("<span class='col1'><input type='checkbox' value='"+parseInt(j + 1)+"'/></span>")
        .append("<span class='col2'>" + parseInt(j + 1)
            + "</span>").append("<span class='col3'>" + dataRoot[j].mobile
            + "</span>").append("<span class='col4'>" + dataRoot[j].province
            + "</span>").append("<span class='col5'>" + dataRoot[j].gateway
            + "</span>").append("<span class='col6'>" + dataRoot[j].insertTime
            + "</span>").append("<span class='col7'>" + dataRoot[j].remark
            + "</span>")
      }
    }
    $(".page-count").text(pageTotal);
  })
}
function getPage() {
  $.getJSON("blackList.ce", function(data) {
        pn = 1;
        var totalCount = data.totalCount; // 总记录数
        var pageSize = 10; // 每页显示几条记录
        var pageTotal = Math.ceil(totalCount / pageSize); // 总页数
        $("#next").click(function() {
              if (pn == pageTotal) {
                alert("后面没有了");
                pn = pageTotal;
              } else {
                pn++;
                gotoPage(pn);
              }
            });
        $("#prev").click(function() {
              if (pn == 1) {
                alert("前面没有了");
                pn = 1;
              } else {
                pn--;
                gotoPage(pn);
              }
            })
        $("#firstPage").click(function() {
              pn = 1;
              gotoPage(pn);
            });
        $("#lastPage").click(function() {
              pn = pageTotal;
              gotoPage(pn);
            });
        $("#page-jump").click(function(){
          if($(".page-num").val() <= pageTotal && $(".page-num").val() != ''){
            pn = $(".page-num").val();
            gotoPage(pn);
          }else{
            alert("您输入的页码有误!");
            $(".page-num").val('').focus();
          }
        })
        $("#firstPage").trigger("click");
      })
}
function gotoPage(pn) {
  // alert(pn);
  $(".current-page").text(pn);
  getJSONData(pn)
}
$(function() {
  getPage();
}) 

ps:JAVA+JQuery实现异步分页

最近一个项目要求实现异步分页,简单的写了一下,不好的请指出~

/**
*分页类
*/
public class PageBean {
  publicint rowCount = 0; // 总记录数
  publicint currentPage = 1;// 当前页数
  publicint sizePerPage = 20;// 每页显示条数
  publicint pageCount = 0;// 总页数
  publicString pageURL;// 请求URL
  publicString pageDisplay;// JSP页面显示
  publicString pageStyle = "numberStyle";// 分页样式
  publicint pagePreOffset = 10;// 向前偏移量
  publicint pageNextOffset = 9;// 向后偏移量
  publicString pageCss;// 预留
  publicString getPageCss() {
    returnpageCss;
  }
  publicvoid setPageCss(String pageCss) {
    this.pageCss = pageCss;
  }
  publicString getPageStyle() {
    returnpageStyle;
  }
  publicvoid setPageStyle(String pageStyle) {
    this.pageStyle = pageStyle;
  }
  publicint getPagePreOffset() {
    returnpagePreOffset;
  }
  publicvoid setPagePreOffset(intpagePreOffset) {
    this.pagePreOffset = pagePreOffset;
  }
  publicint getPageNextOffset() {
    returnpageNextOffset;
  }
  publicvoid setPageNextOffset(intpageNextOffset) {
    this.pageNextOffset = pageNextOffset;
  }
  publicString getPageDisplay() {
    String nextClick=" onclick='ajaxpage(""+this.pageURL+ "?currentPage=" + (this.currentPage + 1)+"");return false;' ";
    String preClick=" onclick='ajaxpage(""+this.pageURL+ "?currentPage=" + (this.currentPage - 1)+"");return false;' ";
    String firstClick=" onclick='ajaxpage(""+this.pageURL+ "?currentPage=1");return false;' ";
    String lastClick=" onclick='ajaxpage(""+this.pageURL+ "?currentPage=" + (this.getPageCount())+"");return false;' ";
    String onChange=" onchange='ajaxpage(""+this.pageURL+ "?currentPage=" + (1)+"");return false;' ";
    StringBuffer pageString =new StringBuffer();
    pageString.append("<div class='"+ this.pageStyle +"'><span >");
    // 数字样式
    if("numberStyle".equalsIgnoreCase(this.pageStyle)) {
      // 如果只有一页,不需要分页
      if(this.getPageCount() ==1) {
        // pageString.append("<strong> 1</strong> ");
      }else {
        if(this.currentPage >1) {// 如果当前页数大于1,<< <可用
          pageString.append("<a class='pagination-first' "+firstClick+" title='首页' href='" + this.pageURL
              +"?currentPage=1'><<</a> ");
          pageString.append("<a class='pagination-prev' "+preClick+"title='上一页' href='" + this.pageURL
              +"?currentPage=" + (this.currentPage -1)
              +"'><</a> ");
        }else {
          pageString
              .append("<a class='pagination-first'><<</a> ");
          pageString
              .append("<a class='pagination-prev'><</a> ");
        }
        // 定义向前偏移量
        intpreOffset = this.currentPage -1 > this.pagePreOffset ?this.pagePreOffset
            :this.currentPage -1;
        // 定义向后偏移量
        intnextOffset = this.getPageCount() -this.currentPage >this.pageNextOffset ?this.pageNextOffset
            :this.getPageCount() -this.currentPage;
        // 循环显示链接数字,范围是从 当前页减向前偏移量 到 当前页加向后偏移量
        for(int i = (this.currentPage - preOffset); i <= (this.currentPage + nextOffset); i++) {
          String numClick=" onclick='ajaxpage(""+this.pageURL+ "?currentPage=" + (i)+"");return false;' ";
          if(this.currentPage == i) {// 当前页要加粗显示
            pageString
                .append("<strong style='color:black;border:0'>"
                    + i +"</strong> ");
          }else {
            pageString.append("<a "+numClick+"href='"+ this.pageURL
                +"?currentPage=" + i + "'>" + i +"</a> ");
          }
        }
        // 如果当前页小于总页数,> >>可用
        if(this.currentPage <this.getPageCount()) {
          pageString.append("<a class='pagination-next' "+nextClick+" title='下一页' href='" + this.pageURL
              +"?currentPage=" + (this.currentPage +1)
              +"'>></a> ");
          pageString.append("<a class='pagination-last' "+lastClick+"title='尾页' href='" + this.pageURL
              +"?currentPage=" + (this.getPageCount()) +"'>>></a> ");
        }else {
          pageString
              .append("<a class='pagination-next' >></a> ");
          pageString
              .append("<a class='pagination-last'>>></a> ");
        }
        pageString.append("<select id='pageSelect' "+onChange+">"+this.getOptions()+"</select>");
      }
    }else if("normalStyle".equalsIgnoreCase(this.pageStyle)) {
      if(this.getPageCount() ==1) {
        pageString.append("<strong> 共1页</strong> ");
      }else {
        if(this.currentPage >1) {
          pageString.append("<a class='pagination-first' "+firstClick+" title='首页' href='" + this.pageURL
              +"?currentPage=1'><<</a> ");
          pageString.append("<a class='pagination-prev' "+preClick+"title='上一页' href='" + this.pageURL
              +"?currentPage=" + (this.currentPage -1)
              +"'><</a> ");
        }else {
          pageString
            .append("<a class='pagination-first'><<</a> ");
          pageString
            .append("<a class='pagination-prev'><</a> ");
        }
        pageString.append("<span class='pageinfo'>第"+this.currentPage+"页/"+this.pageCount+"页</span>");
        if(this.currentPage <this.getPageCount()) {
          pageString.append("<a class='pagination-next' "+nextClick+" title='下一页' href='" + this.pageURL
              +"?currentPage=" + (this.currentPage +1)
              +"'>></a> ");
          pageString.append("<a class='pagination-last' "+lastClick+"title='尾页' href='" + this.pageURL
              +"?currentPage=" + (this.getPageCount()) +"'>>></a> ");
        }else {
          pageString
            .append("<a class='pagination-next' >></a> ");
          pageString
            .append("<a class='pagination-last'>>></a> ");
        }
        pageString.append("<select id='pageSelect' "+onChange+">"+this.getOptions()+"</select>");
      }
    }
    pageString.append("</span></div>");
    this.pageDisplay = pageString.toString();
    returnpageDisplay;
  }
  publicvoid setPageDisplay(String pageDisplay) {
    this.pageDisplay = pageDisplay;
  }
  publicString getPageURL() {
    returnpageURL;
  }
  publicvoid setPageURL(String pageURL) {
    this.pageURL = pageURL;
  }
  publicint getPageCount() {
    this.pageCount =this.rowCount %this.sizePerPage ==0 ? (this.rowCount /this.sizePerPage)
        : (this.rowCount /this.sizePerPage) +1;
    returnthis.pageCount;
  }
  publicvoid setPageCount(intpageCount) {
    this.pageCount = pageCount;
  }
  publicint getRowCount() {
    returnrowCount;
  }
  publicvoid setRowCount(introwCount) {
    this.rowCount = rowCount;
  }
  publicint getCurrentPage() {
    returncurrentPage;
  }
  publicvoid setCurrentPage(intcurrentPage) {
    this.currentPage = currentPage;
  }
  publicint getSizePerPage() {
    returnsizePerPage;
  }
  publicvoid setSizePerPage(intsizePerPage) {
    this.sizePerPage = sizePerPage;
  }
  privateString getOptions(){
    StringBuffer sb =new StringBuffer();
    switch(this.sizePerPage) {
    case10:
      sb.append("<option value=10>10</option><option value=20>20</option><option value=30>30</option><option value=50>50</option><option value=100>100</option>");
      break;
    case20:
      sb.append("<option value=20>20</option><option value=10>10</option><option value=30>30</option><option value=50>50</option><option value=100>100</option>");
      break;
    case30:
      sb.append("<option value=30>30</option><option value=10>10</option><option value=20>20</option><option value=50>50</option><option value=100>100</option>");
      break;
    case50:
      sb.append("<option value=50>50</option><option value=10>10</option><option value=20>20</option><option value=30>30</option><option value=100>100</option>");
      break;
    case100:
      sb.append("<option value=100>100</option><option value=10>10</option><option value=20>20</option><option value=30>30</option><option value=50>50</option>");
      break;
    }
    returnsb.toString();
  }
}

//后台调用
PageBean page = new PageBean();
setPageInfo(list,request);
public void setPageInfo(List list,HttpServletRequest request){
    page.setCurrentPage(this.getCurrentPage());
    if(request.getParameter("perSize")==null){
      page.setSizePerPage(20);//default 20
    }
    else{
      page.setSizePerPage(Integer.valueOf(request.getParameter("perSize")));
    }
    page.setRowCount(list.size());
    //page.setPageStyle("normalStyle");
    //page.setPagePreOffset(5);//default 10
    //page.setPageNextOffset(4);//default 9
    page.setPageURL(request.getRequestURL().toString());
}
[css] view plaincopyprint?
/**
**  CSS
*/
.numberStyle,.normalStyle {
  text-align:left;
}
.numberStyle a,.normalStyle a {
display: inline-block;
color: #5489F1;
text-decoration: none;
font-size: 14px;
font-weight:bold;
font-family: Geneva, Arial, Helvetica, sans-serif;
border: 1px solid #999;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
background-position:center;
}
.numberStyle strong,.normalStyle strong {
display: inline-block;
color: #5489F1;
text-decoration: none;
font-size: 14px;
font-weight:bold;
font-family: Geneva, Arial, Helvetica, sans-serif;
border: 1px solid #999;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
background-position:center;
}
.numberStyle a:hover,.normalStyle a:hover{
background-color: #d0d0d0;
}
.normalStyle .pageinfo{
  font-size: 14px;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  color: #5489F1;
} 

[javascript] view plaincopyprint?
/**
** JS import jquery.js before call function
*/
function ajaxpage(action){
  action=action+"&perSize="+$("#pageSelect").val();
  $.ajax( {
  type : "POST",
  url : action,
  success : function(msg) {
  //回调函数,后台拼接字符串返回msg
    //删除原有数据,添加新数据
    //比如:$("#displayTable>thead").nextAll().remove();$("#displayTable").append(msg);
  }
  });
}

以上就是本文给大家介绍的使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页,希望对大家有所帮助。

时间: 2015-10-20

Java Web 简单的分页显示实例代码

本文通过两个方法:(1)计算总的页数. (2)查询指定页数据,实现简单的分页效果. 思路:首先得在 DAO 对象中提供分页查询的方法,在控制层调用该方法查到指定页的数据,在表示层通过 EL 表达式和 JSTL 将该页数据显示出来. 先给大家展示下效果图: 题外话:该分页显示是用 "表示层-控制层-DAO层-数据库"的设计思想实现的,有什么需要改进的地方大家提出来,共同学习进步.废话不多说了,开始进入主题,详细步骤如下所示: 1.DAO层-数据库 JDBCUtils 类用于打开和关闭数据

jsp+servlet+javabean实现数据分页方法完整实例

本文实例讲述了jsp+servlet+javabean实现数据分页方法.分享给大家供大家参考,具体如下: 这里秉着且行且记的心态,记录下学习过程,学得快忘得快,生怕遗忘,以备日后使用. 用到的部分代码是自己在网上查找,并自己修改,加上自己的理解.也不知道算不算原创,只做自己学习记录. 使用相关:PostgreSQL数据库.dom4j.JSP.Servlet 一.首先是工程格局,来个全局视图方便读者与自己查看与使用 思路为: 以config.xml文件记录配置信息,以方便数据库更改,方便移植与重用

Java的MyBatis框架中实现多表连接查询和查询结果分页

实现多表联合查询 还是在david.mybatis.model包下面新建一个Website类,用来持久化数据之用,重写下相应toString()方法,方便测试程序之用. package david.mybatis.model; import java.text.SimpleDateFormat; import java.util.Date; public class Website { private int id; private String name; private int visito

Ajax分页插件Pagination从前台jQuery到后端java总结

困惑了我一段时间的网页分页,今天特地整理了一下我完成不久的项目.下面我要分享下我这个项目的分页代码,前后端通吃.希望前辈多多指教. 一.效果图 下面我先上网页前台和管理端的部分分页效果图,他们用的是一套代码. 二.上代码前的一些知识点 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 三.前台代码部分 var pageSize =6; //每页显示多少条记录 var total; //总共多少记录 $(function(

Java分页简介_动力节点Java学院整理

什么是分页技术 分页,是一种将所有数据分段展示给用户的技术.用户每次看到的不是全部数据,而是其中的一部分,如果在其中没有找到自习自己想要的内容,用户可以通过制定页码或是翻页的方式转换可见内容,直到找到自己想要的内容为止.其实这和我们阅读书籍很类似. 分页的意义 分页确实有效,但它一定会加大系统的复杂度,但可否不分页呢?如果数据量少的话当然可以.但是对于企业信息系统来说数据量不会限制在一个小范围内.如果不顾一切的Select * from某个表,再将返回的数据一古脑的扔给客户,即使客户能够忍受成千

Java(基于Struts2) 分页实现代码

分页实现的基本过程是这样的: 1. 设置自己的分页器的基本参数(可以从配置文件中读取) ■每页显示的记录条数 ■每次最多显示多少页 2. 编写设置分页器其他参数的函数 主要参数有以下几个: 总记录条数 总页数 当前页号:现在显示的页数 每页显示的记录条数 当前页开始行(第一行是0行) 第一页页号 最后页页号 下一页页号 上一页页号 画面上显示的起始页号 画面上显示的结束页号 参数基本实现原理:设置以上各个参数,实际上只需要三个参数就可以对所有的其他变量进行设置,即总记录条数,每页显示记录数,每次

Java简单实现SpringMVC+MyBatis分页插件

1.封装分页Page类 package com.framework.common.page.impl; import java.io.Serializable; import com.framework.common.page.IPage; /** * * * */ public abstract class BasePage implements IPage, Serializable { /** * */ private static final long serialVersionUID

举例详解用Java实现web分页功能的方法

分页问题是一个非常普遍的问题,开发者几乎都会遇到,这里不讨论具体如何分页,说明一下Web方式下分页的原理.首先是查询获得一个结果集(表现为查询数据库获得的结果),如果结果比较多我们一般都不会一下显示所有的数据,那么就会用分页的方式来显示某些数据(比如20条).因为Http的无状态性,每一次提交都是当作一个新的请求来处理,即使是换页,上一次的结果对下一次是没有影响的. 这里总结三种实现分页的方式,不知道还有没有别的! 1.每次取查询结果的所有数据,然后根据页码显示指定的纪录. 2.根据页面只取一页

Java操作MongoDB模糊查询和分页查询

本文实例为大家分享了Java操作MongoDB模糊查询和分页查询,供大家参考,具体内容如下 模糊查询条件: 1.完全匹配 Pattern pattern = Pattern.compile("^name$", Pattern.CASE_INSENSITIVE); 2.右匹配 Pattern pattern = Pattern.compile("^.*name$", Pattern.CASE_INSENSITIVE); 3.左匹配 Pattern pattern =

js前台分页显示后端JAVA数据响应

好久没有写过代码了,手有些痒了,正好底下小弟们某些功能的实现着实影响工程进度,便自己动手给写了一段. 功能:js前台分页显示 + 后台数据响应(JAVA Servlet即可) 框架:jquery1.8.7 此文目的:给那些刚入行软件开发,喜欢这也看看,那也看看,这儿copy一下,那儿copy一下初级小菜鸟们做一个表帅; 1 为程序者需认真踏实坐下来; 2 程序需要有投入才有收获; 3 有收获才有鼓舞,才有动力一步一步往下走! 下面上代码,具体会有小注释 1.web页面的逻辑处理(js代码写到页面

JS实现点击参数面板按钮显示或隐藏数据

当报表中列出数据太多时,想通过显示按钮隐藏明细数据只显示统计数据.如下图示例,那么该如何实现呢?本文以FineReport为例,来讲述JS如何实现点击参数面板按钮显示或隐藏数据. 打开报表 在参数面板添加一个标签控件,控件名为lable,设置标签控件不可见,控件值为"显示". 在参数面板添加一个按钮控件,控件名为button,控件值为"只显示合计数据",并添加点击事件. 编辑点击事件,添加下面的JavaScript代码: 点击参数面板空白处,将"点击查询前

Vue.js实现数据响应的方法

许多前端JavaScript框架(例如Angular,React和Vue)都有自己的数据相应引擎.通过了解相应性及其工作原理,您可以提高开发技能并更有效地使用JavaScript框架.在视频和下面的文章中,我们构建了您在Vue源代码中看到的相同类型的Reactivity. 如果您观看此视频而不是阅读文章,请观看系列中的下一个视频,与Vue的创建者Evan You讨论反应性和代理.

JS的Ajax与后端交互数据的实例

JS中很多地方会使用Ajax与后台进行数据交互. Ajax是通过http,使得JS与后端进行数据通信,由于Ajax的异步特性,可以使多个Ajax请求同时访问后端,对页面的局部数据进行逻辑处理,并渲染. ajax中前端和后端的交互图: 代码实现: $.ajax({ type: "post", url: "http://localhost:8080/ccnb/user/login", data: { "telephone": login_name,

nginx+vue.js实现前后端分离的示例代码

1.nginx 是一个高性能的HTTP和反向代理服务器,常用于分布式服务器管理. 它常用于做负载均衡(通过调用多台服务器达到此目的) 静态资源输出更快,可以对资源实现gzip压缩后输出(这也是本文为什么用它做静态资源访问的一个重要原因) 适合解决跨域问题和反向代理(因为谁也不想看到在本域名下看到访问其他域名的情况发生,跨域可导致csrf攻击,这是本文用它的第二个原因) 占用内存少,秒启,能快速切换结点,防止宕机 2.es6 是ECMAScript的第六个版本,如果想要学好vue.js等js框架,

Vue源码解析之数据响应系统的使用

接下来重点来看Vue的数据响应系统.我看很多文章在讲数据响应的时候先用一个简单的例子介绍了数据双向绑定的思路,然后再看源码.这里也借鉴了这种方式,感觉这样的确更有利于理解. 数据双向绑定的思路 1. 对象 先来看元素是对象的情况.假设我们有一个对象和一个监测方法: const data = { a: 1 }; /** * exp[String, Function]: 被观测的字段 * fn[Function]: 被观测对象改变后执行的方法 */ function watch (exp, fn)

Layui数据表格 前后端json数据接收的方法

先上效果图: 前端数据表格: <div class="x-body"> <%-- 数据表格 --%> <table class="layui-table" lay-data="{ id:'test', url:'/menu/page', page:true, limits: [10,20,50], //每页条数的选择项,默认:[10,20,30,40,50,60,70,80,90] limit: 10, //每页默认显示的数量

Vue2.X和Vue3.0数据响应原理变化的区别

defineProperty 定义对象的属性,只不过属性里的get和set实现了响应式. 常用: value属性值 get set writeable 是否可写 enumrable 可遍历 Vue从改变一个数据到发生改变的过程  Vue2.X数据响应原理 创建页面,实现延时2s修改对象的值. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>LearnVue

JS自定义对象实现Java中Map对象功能的方法

本文实例讲述了JS自定义对象实现Java中Map对象功能的方法.分享给大家供大家参考.具体分析如下: Java中有集合,Map等对象存储工具类,这些对象使用简易,但是在JavaScript中,你只能使用Array对象. 这里我创建一个自定义对象,这个对象内包含一个数组来存储数据,数据对象是一个Key,可以实际存储的内容!   这里Key,你要使用String类型,和Java一样,你可以进行一些增加,删除,修改,获得的操作. 使用很简单,我先把工具类给大家看下: 复制代码 代码如下: /**  *