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

好久没有写过代码了，手有些痒了，正好底下小弟们某些功能的实现着实影响工程进度，便自己动手给写了一段。 功能：js前台分页显示 + 后台数据响应(JAVA Servlet即可) 框架：jquery1.8.7 此文目的：给那些刚入行软件开发，喜欢这也看看，那也看看，这儿copy一下，那儿copy一下初级小菜鸟们做一个表帅; 1 为程序者需认真踏实坐下来; 2 程序需要有投入才有收获; 3 有收获才有鼓舞，才有动力一步一步往下走！ 下面上代码，具体会有小注释 1、web页面的逻辑处理(js代码写到页面里时，有个好处，调试时不会受js文件缓存的影响) 复制代码 代码如下: 2 后台页面响应的JAVA代码(即一个标准的Servlet) 复制代码 代码如下: package com.ljb.ttt.servlet; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.ljb.ttt.impl.BasicDao; public class AllCheckAction extends HttpServlet { protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doPost(req, resp); } protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { try { int executetype = -1; String types = req.getParameter("executetype"); if(types == null) return; else executetype = Integer.valueOf(types); PrintWriter out = resp.getWriter(); BasicDao bd = new BasicDao(); switch(executetype){ case 5: String orderStatus = req.getParameter("orderstatus"); Integer page = Integer.valueOf(req.getParameter("page")); Integer pageSize = Integer.valueOf(req.getParameter("pagerows")); String condition = ""; String content = ""; Integer wholePages = 0; if(orderStatus != null && (!orderStatus.equals(""))){ condition = String.format(" and orderstatus='%s'",orderStatus); } int wholeSize = bd.count("`order` t1,worker t2", pageSize," and t1.wid=t2.wid" + condition+" and t1.orid in (select orid from orderdetail)"); if(0 == wholeSize%pageSize) wholePages = wholeSize/pageSize; else wholePages = wholeSize/pageSize + 1; //对于不正确页的判断处理 if (page >= wholePages) page = wholePages; if(pagepage = 1; condition += String.format(" limit %d,%d",pageSize*(page-1),pageSize); content = String.format("{\"ContentBody\":[{\"page\":\"%d\",\"wholepage\":\"%d\",\"searchtext\":\""+condition+"\"}]}", page,wholePages); out.print(content); System.out.println(content); break; //for OrderClose.jsp in get order data case 6: String sconditon = (String)req.getParameter("scondition"); if(sconditon != null){ if(sconditon.equals("")) out.print(getJsonData(6, "", "Orders",bd)); else out.print(getJsonData(6, sconditon, "Orders",bd)); } break; default: break; } out.flush(); out.close(); } catch (IOException e) { e.printStackTrace(); } } //generate data from a search sql private String getJsonData(int type,String searchContent,String jsonName,BasicDao bd){ String sql = ""; switch(type){ //获取 case 6: sql = String.format("select t1.orid,t2.wname,t1.date,t1.remark,t1.orderstatus from `order` t1,worker t2 where t1.wid=t2.wid" + " and t1.orid in (select orid from orderdetail)%s",searchContent); break; default: break; } String temp = bd.getJsonStr(sql,jsonName); // System.out.println(temp); return temp; } } 3 让Servlet在web.xml中的配置参考 复制代码 代码如下: CheckSaveServlet com.ljb.ttt.servlet.CheckSaveServlet CheckSaveServlet /CheckSaveServlet 4 付上本次后台调用的一个关键方法，将查询转化为JSON数据格式的方法 复制代码 代码如下: //return DataType {"tittle":[{"colName":"val",..},{},{}]} public String getJsonStr(String sql,String jsonName){ String jsonStr = ""; String tjson = ""; Connection con = null; ResultSet rs = null; PreparedStatement pst = null; con = sh.getConnection(); HashMap hm = sh.select(con, pst, rs, sql, null); rs = (ResultSet)hm.get("ResultSet"); int colNum; try { colNum = rs.getMetaData().getColumnCount(); String colName[] = new String[colNum]; for(int i= 0;icolName[i] = rs.getMetaData().getColumnName(i+1); while(rs.next()){ jsonStr += "{"; String temp = ""; for(int i= 0;itemp += "\""; temp += colName[i]; temp += "\":\""; temp += rs.getString(i+1); temp += "\","; } jsonStr += temp.substring(0, temp.length()-1); jsonStr += "},"; } tjson += "{\""+jsonName + "\":["; if(jsonStr!="") tjson += jsonStr.substring(0, jsonStr.length()-1); tjson += "]}"; } catch (SQLException e) { // TODO Auto-generated catch block e.printStackTrace(); } pst = (PreparedStatement)hm.get("PreparedStatement"); sh.closeAll(rs, pst, con); return tjson; } 注： 1 里面没有见到过的方法调用，不用担心，搞过java连接数据库的都没有问题； 2 这个里面有一个比较不足的地方，将页数信息与页面数据分两次AJAX请求得到，这个是非常影响性能的，如果能做到将一次ajax请求，一次解析获取全部需要数据，那就比较出彩了(嵌套JSON就是不错的选择)。 3 由于并非专职搞web开发，发现这个CSS样式搭配起来还是非常费劲的。 最后贴个效果图上来：