js frontend paging displays backend JAVA data response_javascript skills-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

js frontend paging displays backend JAVA data response_javascript skills

May 16, 2016 pm 05:40 PM

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"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>订单结算</title> 
<script type="text/javascript" src="js/jquery-1.8.7.min.js"></script> 
<LINK href="images/style.css" type="text/css" rel="stylesheet"> 
</head> 
<body> 
<div align="left" style="width: 83%"> 
<p style="color: blue"> 
采购单状态: 
<select id="orderstatus"> 
<option value="" SELECTED>-search all!-</option> 
<option value="未结">未结</option> 
<option value="部分">部分</option> 
<option value="已结">已结</option> 
</select> 
   
<input type="button" style="height: 25px;width:70px" value="查询" onClick="firstFindPage(1)" /> 
<br> 
  
</p> 
</div> 
<div> 
<table width="100%" cellpadding="0" cellspacing="0" border="1" style="padding:2 " bordercolorlight="#3B4D61" bordercolordark="#ffffff" id='contentList'> 
</table> 
</div> 
<br> 
<div> 
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="padding:2 " id='pageList'> 
</table> 
</div> 
</body> 
<script type="text/javascript"> 
//填充页面信息 
function writePageList(curpage,wholePage){ 
var pageContent = ""; 
if(curpage != 1){ 
pageContent  = "<a href='#' onclick='findPage(1)' style='text-decoration: none'><b style='font-size: 12'>第一页</b></a>    "; 
pageContent  = "<a href='#' onclick='findPage(" (parseInt(curpage)-1) ")' style='text-decoration: none'><b style='font-size: 12'>上一页</b></a>    "; 
} 
if(curpage != wholePage){ 
pageContent  = "<a href='#' onclick='findPage(" (parseInt(curpage) 1) ")' style='text-decoration: none'><b style='font-size: 12'>下一页</b></a>    "; 
pageContent  = "<a href='#' onclick='findPage(" (parseInt(wholePage)) ")' style='text-decoration: none'><b style='font-size: 12'>最后一页</b></a>    "; 
} 
if(1 == wholePage){ 
pageContent  = "<a href='#' onclick='findPage(" (parseInt(wholePage)) ")' style='text-decoration: none'><b style='font-size: 12'>当前只有一页</b></a>    "; 
} 
pageContent  = "页数：<label id='curpage' style='color: red; font-size: 13'>" curpage "</label>/<label id='wholepages' style='color: red; font-size: 13'>" wholePage "</label>    "; 
pageContent  = "        <input id='ppage' type='text' size='5'/><input type='button' style='height: 25px;width:55px' value='>>跳转' onclick='gotoPage()'/>"; 
// alert(pageContent); 
$('#pageList').empty(); 
$('#pageList').append("<tr><td>"  
pageContent 
 "</td></tr>"); 
} 
//悠订单状态 
function changeStatus(orid){ 
var status = $('#status' orid).val(); 
if(status==null || status==undefined){ 
alert("状态信息不能为空！"); 
return; 
} 
$.post("DetailChange", { 
etype : 11, 
orid : orid, 
status : status 
}, function (data) { 
if(parseInt(data) > 0) 
alert("Status successful"); 
else 
alert("Modification failed"); 
}); 
} 
//Used to check order details
function findOrderDetail(orid){ 
var urls = "FindOrderDetail.jsp?orid=" orid; 
window.open(urls,'newwindow ','height=400,width=600,top=100,left=200,toolbar=no,menubar=no,scrollbars=yes,resizable=no,location=no, status=no'); 
} 
//Fill table data
function writeContent(data){ 
// alert(data); 
var content = data.Orders; 
$('#contentList').empty() ; 
$('#contentList').append("<tr>" 
"<td><b style='font-size: 16'>Purchase number</b>&lt ;/td>" 
"<td><b style='font-size: 16'>Handler</b></td>" 
"<td>< b style='font-size: 16'>Order Date</b></td>" 
"<td><b style='font-size: 16'>Remarks< /b></td>" 
"<td><b style='font-size: 16'>Status</b></td>" 
"<td&gt ;<b style='font-size: 16'>Operation 1</b></td>" 
"<td><b style='font-size: 16'>Operation 2</b></td>" 
"</tr>"); 
$.each(content,function(idx, item) { 
var tdc = "<tr> " 
"<td>" String(item.orid) "</td>" 
"<td>" String(item.wname) "</td>" 
"&lt ;td>" String(item.date) "</td>" 
"<td>" String(item.remark) "</td>" 
"<td><select id='status" String(item.orid) "' style='height: 25px;width:80px'>" 
"<option value='" String(item.orderstatus) "' SELECTED>Open </option>" 
"<option value='Open'>Open</option>" 
"<option value='Part'>Part</option>" 
"<option value='Close'>Close</option>" 
"</select></td>" 
"<td><input type ='button' value='Modify Status' style='height: 25px;width:80px' onclick='changeStatus(" String(item.orid) ")'/></td>" 
"&lt ;td><input type='button' value='View details' style='height: 25px;width:80px' onclick='findOrderDetail(" String(item.orid) ")'/></td&gt ;" 
"</tr>"; 
// alert(tdc); 
$('#contentList').append(tdc); 
}); 
} 
//For page jump
function findPage(pageId){ 
var curstatus = $('#orderstatus').val(); 
$.post("AllCheckAction", { 
executetype : 5, 
page : pageId, 
orderstatus : curstatus, 
pagerows :1 
}, function(data) { 
var contents = data.ContentBody; 
$ .each(contents,function(id, ite) { 
var curpage = ite.page; 
var wholePages = ite.wholepage; 
con = ite.searchtext; 
$.post("AllCheckAction ", { 
executetype : 6, 
scondition : con 
},function(data2){ 
writeContent(data2); 
},"json"); 
writePageList(curpage ,wholePages); 
}); 
}, "json"); 

} 
//Query button calls 
function firstFindPage(pageId){ 
findPage(pageId ); 
} 
//Used for page jump response logic processing, that is, jumping directly from the input page 
function gotoPage(){ 
var ppage = $('#ppage') .val(); 
var maxpage = $('#wholepages').innerHTML; 
//numint() function determines whether it is a number 
if(ppage == null || ppage == undefined | | (!numint(ppage))){ 
alert("Invalid page number! "); 
return; 
} 
if(parseInt(ppage)>parseInt(maxpage) || parseInt(ppage)<1){ 
alert("The requested page does not have a page number! "); 
return; 
} 
findPage(ppage); 
}; 
//Determine whether it is an integer
function numint(value) { 
var p = " 0123456789"; 
for ( var i = 0; i < value.length; i ) { 
var num = p.indexOf(value.charAt(i)); 
if (num < 0 ) { 
return false; 
} 
} 
return true; 
} 
</script> 
</html> 

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中的配置参考

复制代码代码如下:

 
<!-- 各种盘点 --> 
<servlet> 
<servlet-name>CheckSaveServlet</servlet-name> 
<servlet-class>com.ljb.ttt.servlet.CheckSaveServlet</servlet-class> 
</servlet> 
<servlet-mapping> 
<servlet-name>CheckSaveServlet</servlet-name> 
<url-pattern>/CheckSaveServlet</url-pattern> 
</servlet-mapping> 

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<String,Object> 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;i<colNum;i  ) 
colName[i] = rs.getMetaData().getColumnName(i 1); 
while(rs.next()){ 
jsonStr  = "{"; 
String temp = ""; 
for(int i= 0;i<colNum;i  ){ 
temp  = """; 
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样式搭配起来还是非常费劲的。
最后贴个效果图上来：
js frontend paging displays backend JAVA data response_javascript skills

js frontend paging displays backend JAVA data response_javascript skills

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn