js前台分页显示后端JAVA数据响应
2023-06-13 09:14:47 时间
好久没有写过代码了，手有些痒了，正好底下小弟们某些功能的实现着实影响工程进度，便自己动手给写了一段。
功能：js前台分页显示+后台数据响应(JAVAServlet即可)
框架：jquery1.8.7
此文目的：给那些刚入行软件开发，喜欢这也看看，那也看看，这儿copy一下，那儿copy一下初级小菜鸟们做一个表帅;
1为程序者需认真踏实坐下来;
2程序需要有投入才有收获;
3有收获才有鼓舞，才有动力一步一步往下走！
下面上代码，具体会有小注释
1、web页面的逻辑处理(js代码写到页面里时，有个好处，调试时不会受js文件缓存的影响)
复制代码代码如下:
功能：js前台分页显示+后台数据响应(JAVAServlet即可)
框架：jquery1.8.7
此文目的：给那些刚入行软件开发，喜欢这也看看，那也看看，这儿copy一下，那儿copy一下初级小菜鸟们做一个表帅;
1为程序者需认真踏实坐下来;
2程序需要有投入才有收获;
3有收获才有鼓舞，才有动力一步一步往下走！
下面上代码，具体会有小注释
1、web页面的逻辑处理(js代码写到页面里时，有个好处，调试时不会受js文件缓存的影响)
<%@pagelanguage="java"contentType="text/html;charset=utf-8"pageEncoding="utf-8"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>订单结算</title>
<scripttype="text/javascript"src="js/jquery-1.8.7.min.js"></script>
<LINKhref="images/style.css"type="text/css"rel="stylesheet">
</head>
<body>
<divalign="left"style="width:83%">
<pstyle="color:blue">
采购单状态:
<selectid="orderstatus">
<optionvalue=""SELECTED>-searchall!-</option>
<optionvalue="未结">未结</option>
<optionvalue="部分">部分</option>
<optionvalue="已结">已结</option>
</select>
<inputtype="button"style="height:25px;width:70px"value="查询"onClick="firstFindPage(1)"/>
<br>
</p>
</div>
<div>
<tablewidth="100%"cellpadding="0"cellspacing="0"border="1"style="padding:2"bordercolorlight="#3B4D61"bordercolordark="#ffffff"id="contentList">
</table>
</div>
<br>
<div>
<tablewidth="100%"cellpadding="0"cellspacing="0"border="0"style="padding:2"id="pageList">
</table>
</div>
</body>
<scripttype="text/javascript">
//填充页面信息
functionwritePageList(curpage,wholePage){
varpageContent="";
if(curpage!=1){
pageContent+="<ahref="#"onclick="findPage(1)"style="text-decoration:none"><bstyle="font-size:12">第一页</b></a> ";
pageContent+="<ahref="#"onclick="findPage("+(parseInt(curpage)-1)+")"style="text-decoration:none"><bstyle="font-size:12">上一页</b></a> ";
}
if(curpage!=wholePage){
pageContent+="<ahref="#"onclick="findPage("+(parseInt(curpage)+1)+")"style="text-decoration:none"><bstyle="font-size:12">下一页</b></a> ";
pageContent+="<ahref="#"onclick="findPage("+(parseInt(wholePage))+")"style="text-decoration:none"><bstyle="font-size:12">最后一页</b></a> ";
}
if(1==wholePage){
pageContent+="<ahref="#"onclick="findPage("+(parseInt(wholePage))+")"style="text-decoration:none"><bstyle="font-size:12">当前只有一页</b></a> ";
}
pageContent+="页数：<labelid="curpage"style="color:red;font-size:13">"+curpage+"</label>/<labelid="wholepages"style="color:red;font-size:13">"+wholePage+"</label> ";
pageContent+=" <inputid="ppage"type="text"size="5"/><inputtype="button"style="height:25px;width:55px"value=">>跳转"onclick="gotoPage()"/>";
//alert(pageContent);
$("#pageList").empty();
$("#pageList").append("<tr><td>"+
pageContent
+"</td></tr>");
}
//悠订单状态
functionchangeStatus(orid){
varstatus=$("#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("状态悠成功");
else
alert("修改失败");
});
}
//用于查订单详情
functionfindOrderDetail(orid){
varurls="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");
}
//填充表格数据
functionwriteContent(data){
//alert(data);
varcontent=data.Orders;
$("#contentList").empty();
$("#contentList").append("<tr>"+
"<td><bstyle="font-size:16">采购编号</b></td>"+
"<td><bstyle="font-size:16">经手人</b></td>"+
"<td><bstyle="font-size:16">订单日期</b></td>"+
"<td><bstyle="font-size:16">备注</b></td>"+
"<td><bstyle="font-size:16">状态</b></td>"+
"<td><bstyle="font-size:16">操作1</b></td>"+
"<td><bstyle="font-size:16">操作2</b></td>"+
"</tr>");
$.each(content,function(idx,item){
vartdc="<tr>"+
"<td>"+String(item.orid)+"</td>"+
"<td>"+String(item.wname)+"</td>"+
"<td>"+String(item.date)+"</td>"+
"<td>"+String(item.remark)+"</td>"+
"<td><selectid="status"+String(item.orid)+""style="height:25px;width:80px">"+
"<optionvalue=""+String(item.orderstatus)+""SELECTED>未结</option>"+
"<optionvalue="未结">未结</option>"+
"<optionvalue="部分">部分</option>"+
"<optionvalue="已结">已结</option>"+
"</select></td>"+
"<td><inputtype="button"value="修改状态"style="height:25px;width:80px"onclick="changeStatus("+String(item.orid)+")"/></td>"+
"<td><inputtype="button"value="查看详情"style="height:25px;width:80px"onclick="findOrderDetail("+String(item.orid)+")"/></td>"+
"</tr>";
//alert(tdc);
$("#contentList").append(tdc);
});
}
//用于页页跳转
functionfindPage(pageId){
varcurstatus=$("#orderstatus").val();
$.post("AllCheckAction",{
executetype:5,
page:pageId,
orderstatus:curstatus,
pagerows:1
},function(data){
varcontents=data.ContentBody;
$.each(contents,function(id,ite){
varcurpage=ite.page;
varwholePages=ite.wholepage;
con=ite.searchtext;
$.post("AllCheckAction",{
executetype:6,
scondition:con
},function(data2){
writeContent(data2);
},"json");
writePageList(curpage,wholePages);
});
},"json");
}
//查询按钮调用
functionfirstFindPage(pageId){
findPage(pageId);
}
//用于页面跳转响应逻辑处理,即直接由输入页进地跳转
functiongotoPage(){
varppage=$("#ppage").val();
varmaxpage=$("#wholepages").innerHTML;
//numint()函数判断是否为数字
if(ppage==null||ppage==undefined||(!numint(ppage))){
alert("无效的页码！");
return;
}
if(parseInt(ppage)>parseInt(maxpage)||parseInt(ppage)<1){
alert("请求页不存在页码！");
return;
}
findPage(ppage);
};
//判断是否为整数
functionnumint(value){
varp="0123456789";
for(vari=0;i<value.length;i++){
varnum=p.indexOf(value.charAt(i));
if(num<0){
returnfalse;
}
}
returntrue;
}
</script>
</html>
2后台页面响应的JAVA代码(即一个标准的Servlet)
packagecom.ljb.ttt.servlet;
importjava.io.IOException;
importjava.io.PrintWriter;
importjavax.servlet.ServletException;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importcom.ljb.ttt.impl.BasicDao;
publicclassAllCheckActionextendsHttpServlet{
protectedvoiddoGet(HttpServletRequestreq,HttpServletResponseresp)
throwsServletException,IOException{
doPost(req,resp);
}
protectedvoiddoPost(HttpServletRequestreq,HttpServletResponseresp)
throwsServletException,IOException{
try{
intexecutetype=-1;
Stringtypes=req.getParameter("executetype");
if(types==null)
return;
else
executetype=Integer.valueOf(types);
PrintWriterout=resp.getWriter();
BasicDaobd=newBasicDao();
switch(executetype){
case5:
StringorderStatus=req.getParameter("orderstatus");
Integerpage=Integer.valueOf(req.getParameter("page"));
IntegerpageSize=Integer.valueOf(req.getParameter("pagerows"));
Stringcondition="";
Stringcontent="";
IntegerwholePages=0;
if(orderStatus!=null&&(!orderStatus.equals(""))){
condition=String.format("andorderstatus="%s"",orderStatus);
}
intwholeSize=bd.count("`order`t1,workert2",pageSize,"andt1.wid=t2.wid"+
condition+"andt1.oridin(selectoridfromorderdetail)");
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;
//forOrderClose.jspingetorderdata
case6:
Stringsconditon=(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(IOExceptione){
e.printStackTrace();
}
}
//generatedatafromasearchsql
privateStringgetJsonData(inttype,StringsearchContent,StringjsonName,BasicDaobd){
Stringsql="";
switch(type){
//获取
case6:
sql=String.format("selectt1.orid,t2.wname,t1.date,t1.remark,t1.orderstatusfrom`order`t1,workert2wheret1.wid=t2.wid"+
"andt1.oridin(selectoridfromorderdetail)%s",searchContent);
break;
default:
break;
}
Stringtemp=bd.getJsonStr(sql,jsonName);
//System.out.println(temp);
returntemp;
}
}
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数据格式的方法
//returnDataType{"tittle":[{"colName":"val",..},{},{}]}
publicStringgetJsonStr(Stringsql,StringjsonName){
StringjsonStr="";
Stringtjson="";
Connectioncon=null;
ResultSetrs=null;
PreparedStatementpst=null;
con=sh.getConnection();
HashMap<String,Object>hm=sh.select(con,pst,rs,sql,null);
rs=(ResultSet)hm.get("ResultSet");
intcolNum;
try{
colNum=rs.getMetaData().getColumnCount();
StringcolName[]=newString[colNum];
for(inti=0;i<colNum;i++)
colName[i]=rs.getMetaData().getColumnName(i+1);
while(rs.next()){
jsonStr+="{";
Stringtemp="";
for(inti=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(SQLExceptione){
//TODOAuto-generatedcatchblock
e.printStackTrace();
}
pst=(PreparedStatement)hm.get("PreparedStatement");
sh.closeAll(rs,pst,con);
returntjson;
}
注：
1里面没有见到过的方法调用，不用担心，搞过java连接数据库的都没有问题；
2这个里面有一个比较不足的地方，将页数信息与页面数据分两次AJAX请求得到，这个是非常影响性能的，如果能做到将一次ajax请求，一次解析获取全部需要数据，那就比较出彩了(嵌套JSON就是不错的选择)。
3由于并非专职搞web开发，发现这个CSS样式搭配起来还是非常费劲的。
最后贴个效果图上来：
相关文章
- java locale 中国_Java描述语言、国家和地理的类——Locale
- java和基岩版区别_我的世界基岩版与Java版有什么区别？「建议收藏」
- java启动器_JAVA基础：Java 启动器如何查找类
- 安卓java游戏模拟器_Java手机游戏模拟器
- java乘法代码_java九九乘法表代码[通俗易懂]
- JVM 学习笔记(1)：Java内存区域
- java浅拷贝和深拷贝的区别_js中深拷贝和浅拷贝的区别
- Java面试集锦（一）之Spring/SpringMVC
- java和python对比
- 用Java代码备份和还原MySQL数据库详解编程语言
- TIOBE 5月编程语言排行榜：Java和C语言正在被超越详解编程语言
- java中类的继承与类加载的初始化详解编程语言
- Java执行js代码详解编程语言
- 解决Linux下重启Java程序的方法（linux重启java）
- 使用JS连接MySQL数据库：实现化繁为简（js连接mysql数据库）
- 机制使用Redis Java设计优化过期机制（redisjava过期）
- 机制使用Redis与Java实现高性能的过期机制（redisjava过期）
- 缓存解决Redis Java缓存过期问题（redisjava过期）
- 设置Redis Java Keys过期策略（redisjava过期）
- 时间设置利用Java设置Redis过期时间（redisjava过期）
- key处理Java处理Redis过期Key的方法（redisjava过期）
- Linux系统中下载Java的方法（linux下java下载）
- Java集合类中文介绍
- js的forin循环和java里foreach循环的区别分析
- 基于NodeJS的前后端分离的思考与实践（六）Nginx+Node.js+Java的软件栈部署实践