Node.js 프런트엔드 페이징은 백엔드 JAVA 데이터 response_javascript 기술을 표시합니다.

오랫동안 코드를 작성하지 않아서 손이 조금 가려웠는데, 아래 분들의 특정 기능 구현이 프로젝트 진행에 큰 영향을 미치는 일이 있어서 제가 직접 한 문단을 작성했습니다.

기능: js 프런트엔드 페이징은 백그라운드 데이터 응답을 표시합니다(JAVA 서블릿이면 충분합니다)
프레임워크: jquery1.8.7
이 글의 목적: 소프트웨어 개발이 처음인 분들을 위한 이렇게 보고, 또 보고, 여기 복사하고, 저리 복사하세요. 초보도 멋질 수 있습니다.
1 프로그래머는 진지하고 현실적으로 앉아 있어야 합니다.
2 프로그래밍에는 투자가 필요합니다.
3 예 얻을 때만 한 걸음씩 앞으로 나아갈 수 있는 영감과 의욕을 얻습니다!

코드는 아래와 같으며 자세한 내용은 작은 댓글이 있을 예정입니다
1. 웹페이지의 논리적 처리(페이지에 js 코드를 작성할 때 장점이 있습니다. 디버깅 시 js의 영향을 받지 않습니다. 파일 캐싱의 영향)

코드 복사 코드는 다음과 같습니다.

采购单状态:

-search all!-
未结
部分
已结

  



 

>

2 백그라운드 페이지 응답을 위한 JAVA 코드(예: 표준 서블릿)




코드 복사

코드는 다음과 같습니다. 다음은:

패키지 com.ljb.ttt.servlet;
java.io.IOException 가져오기;
java.io.PrintWriter 가져오기;
javax.servlet.ServletException 가져오기;
javax.servlet.http.HttpServlet 가져오기;
javax.servlet.http.HttpServletRequest 가져오기;
javax.servlet.http.HttpServletResponse 가져오기;
com.ljb.ttt.impl.BasicDao 가져오기;
public class AllCheckAction은 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 {
intexecutetype = -1;
문자열 유형 = req.getParameter("executetype");
if(types == null)
return;
else
executetype = Integer.valueOf(types);
PrintWriter 출력 = resp.getWriter();
BasicDao bd = new BasicDao();
switch(executetype){
사례 5:
String orderStatus = req.getParameter("orderstatus");
정수 페이지 = Integer.valueOf(req.getParameter("page"));
정수 pageSize = Integer.valueOf(req.getParameter("pagerows"));
문자열 조건 = "";
문자열 내용 = "";
정수 전체 페이지 = 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 " 및 t1.orid in(에서 orid 선택 주문 세부정보)");
if(0 == WholeSize%pageSize)
wholePages = WholeSize/pageSize;
else
wholePages = WholeSize/pageSize 1;
//对于不正确页적判断处리
if (page >= WholePages)
page = WholePages;
if(page페이지 = 1;
condition = String.format(" 제한 %d,%d",pageSize*(page-1),pageSize);
content = String.format("{"ContentBody":[{"page":"%d","wholepage":"%d","searchtext":"" 조건 ""}]}",
페이지,전체페이지);
out.print(콘텐츠);
System.out.println(content);
휴식;
//주문 데이터 가져오기의 OrderClose.jsp
케이스 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;
}
out.flush();
out.close();
} catch(IOException e) {
e.printStackTrace();
}
}
//검색 sql에서 데이터 생성
private String getJsonData(int type,String searchContent,String jsonName,BasicDao bd){
String sql = "";
스위치(유형){
//获取
사례 6:
sql = String.format("select t1.orid,t2.wname,t1.date,t1.remark,t1.orderstatus `order` t1,worker t2에서 t1.wid=t2.wid"
" 및 t1.orid(orderdetail에서 orid 선택)%s",searchContent);
휴식;
기본값:
break;
}
String temp = bd.getJsonStr(sql,jsonName);
// System.out.println(temp);
반납 온도;
}
}

3 让Servlet재web.xml중적配置参考

复主代码 代码如下:

CheckSaveServlet
com.ljb.ttt.servlet.CheckSaveServlet


CheckSaveServlet
/CheckSaveServlet

4 付上本次后台调用一个关键方法,将查询转 화법

复代码 代码如下:

//return DataType {"tittle":[{"colName":"val",..},{},{}]}
public String getJsonStr(String sql,String jsonName){
문자열 jsonStr = "";
문자열 tjson = "";
연결 con = null;
ResultSet rs = null;
PreparedStatement pst = null;
con = sh.getConnection();
해시맵 hm = sh.select(con, pst, rs, sql, null);
rs = (ResultSet)hm.get("ResultSet");
int colNum;
시도 {
colNum = rs.getMetaData().getColumnCount();
문자열 colName[] = 새 문자열[colNum];
for(int i= 0;icolName[i] = rs.getMetaData().getColumnName(i 1);
while(rs.next()){
jsonStr = "{";
문자열 온도 = "";
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 자동 생성된 catch 블록
e.printStackTrace();
}
pst = (PreparedStatement)hm.get("PreparedStatement");
sh.closeAll(rs, pst, con);
tjson을 반환합니다.
}

注：
1 里面没有见到过的方调用，不用担心，搞过java连接数据库的文没有问题;
2개의 다른 지역에는 사용할 수 없는 지역이 있습니다.将一次ajax请求，一次解析获取전체부需要数据，那就比较出彩了(嵌套JSON就是不错的选择)。
3 由于并不专职搞web开发，发现这个CSS样式搭配起来还是不常费劲的。
最后贴个效果图上来：