js frontend paging displays backend JAVA data response_javascript skills

I haven’t written code for a long time, and my hands were a little itchy. It happened that the implementation of certain functions by the guys below really affected the progress of the project, so I wrote a paragraph myself.

Function: js front-end paging displays background data response (JAVA Servlet is enough)
Framework: jquery1.8.7
Purpose of this article: For those who are new to software development, if you like this, take a look, then Also take a look, copy here, copy there, junior novices can be cool;
1 Programmers need to sit down seriously and down-to-earth;
2 Programming requires investment in order to gain;
3 Yes Only when you gain are you inspired and motivated to move forward step by step!

The code is below, and there will be small comments for details
1. Logical processing of web pages (when js code is written into the page, there is an advantage. It will not be affected by js during debugging. Impact of file caching)

Copy code The code is as follows:

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>

采购单状态:

-search all!-
未结
部分
已结

  



 

2 JAVA code for background page response (i.e. a standard Servlet)

Copy code The code is as follows:

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(page<=1)
page = 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样式搭配起来还是非常费劲的。
最后贴个效果图上来：