js前台分頁顯示後端JAVA資料回應_javascript技巧

好久沒有寫過代碼了，手有些癢了，正好底下小弟們某些功能的實現著實影響工程進度，便自己動手給寫了一段。

功能：js前台分頁顯示後台資料回應(JAVA Servlet即可)
框架：jquery1.8.7
此文目的：給那些剛入行軟體開發，喜歡這也看看，那也看看，這兒copy一下，那兒copy一下初級小菜鳥們做一個表帥;
1 為程序者需認真踏實坐下來;
2 程序需要有投入才有收穫;
3 有收穫才有鼓舞，才有動力一步一步往下走！

下面上程式碼，具體會有小註解
1、web頁面的邏輯處理(js程式碼寫到頁裡時，有個好處，除錯時不會受js檔案快取的影響)

複製程式碼 程式碼如下:

采购单状态:

-search all!-
未结
部分
已结

  



 

身體>

//填充頁面資訊
function writePageList(curpage,wholePage){
var pageContent = "";
if(curpage != 1){
pageContent = "第一頁     ";
pageContent = "上一頁     ";
}
if(curpage != WholePage){
pageContent = "下一頁     ";
pageContent = "最後一頁     ";
}
if(1 == WholePage){
pageContent = "目前只有一頁     " ;
}
pageContent = "頁碼：" curpage "/"整頁「    」;
pageContent = "        ";
//alert(pageContent);
$ ('#pageList').empty();
$('#pageList').append(""
pageContent
"") ;
}
//悠訂單狀態
function changeStatus(orid){
var status = $('#status' orid).val();
if(status==null || status==undefined){
alert("狀態資訊不能為空！");
return;
}
$.post("DetailChange", {
etype : 11,
orid : orid,
status : status
orid : orid,
status : status
}, function (data) {
if(parseInt(data) > 0)
alert("狀態悠成功");
else
alert("修改失敗");
});
}
//用於檢查訂單詳情
function findOrderDetail(orid){
var urls = "FindOrderDetail.jsp?orid=" orid;
window.open(urls,Detail.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');
}
//填入表格資料
function writeContent(data){
// alert(data);
var content = data.Orders;
$('#contentList').empty();
$('#contentList').append(""
"購買編號"
"經手人"
"訂單日期"
"備註"
"狀態"
"操作1"
" 操作2"
"");
$.each(content,function(idx, item) {
var tdc = ""
"" String(item.orid) ""
"" String(item.wname) ""
" " String(item.date) ""
"" String(item.remark) ""
""
"未未結"
"未結"
"部分"
"已結"
""
""
""
"";
// alert( tdc);
$('#contentList').append(tdc);
});
}
//用於頁頁跳轉
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");

}
//查詢按鈕呼叫
function firstFindPage(pageId){
findPage(pageId);
}
//用於頁面跳轉回應邏輯處理,即直接由輸入頁進地跳轉
function gotoPage(){
var ppage = $('#ppage').val();
var maxpage = $('#wholepages').innerHTML ;
//numint()函數判斷是否為數字
if(ppage == null || ppage == undefined || (!numint(ppage))){
alert("無效的頁碼！ ");
return;
}
if(parseInt(ppage)>parseInt(maxpage) || parseInt(ppage)alert("請求頁不存在頁碼！") ;
return;
}
findPage(ppage);
};
//判斷是否為整數
function numint(value) {
var p = "0123456789" ;
for ( var i = 0; i var num = p.indexOf(value.charAt(i));
if (num return false;
}
}
return true;
}

2 後台頁面回應的JAVA程式碼(即一個標準的Servlet) 複製程式碼

程式碼如下:

套件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;
拋出ServletException, IOException {
try {
intexecutetype = -1;
字串型別= req.getParameter("executetype");
字串型別= req.getParameter("executetype"); )
回傳；
else
executetype = Integer.valueOf(types);
PrintWriter out = resp.getWriter();
BasicDao bd = new BasicDao() 情況5:
String orderStatus = req.getParameter("orderstatus");
整數頁= Integer.valueOf(req.getParameter("page"));
Integer pageSize =Integer pageSize =Integer pageSize =Integer page page Integer.valueOf(req.getParameter("pagerows"));
字串條件= "";
字串內容= "";
整數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 " 和t1.orid in (select orid from訂單詳細資料)");
if(0 = = WholeSize%pageSize)
wholePages = WholeSize/pageSize;
其他
wholePages = WholeSize/pageSize 1;
//對於不正確頁的判斷處理
if (page >= WholePages)
page = WholePages;
if(頁頁=1;
condition = String.format("限制%d,%d",pageSize*(page-1), pageSize);
content = String.format("{"ContentBody":[{"page":"%d","wholepage":"%d","searchtext":""條件""}]} ",
頁面，整個頁面）；
out.print(內容);
System.out.println(內容);
休息;
//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, "訂單",bd));
}
休息；
預設：
中斷；
}
out.flush();
out.close();
} catch (IOException e) {
e .printStackTrace();
}
}
//從搜尋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來自`order` t1，worker t2，其中t1.wid=t2.wid"
" 和t1.orid in (select orid from orderdetail)%s",searchContent);
休息；
預設：
中斷；
}
String temp = bd.getJsonStr(sql,jsonName);
// System.out.println(temp);
回傳溫度；
}
}


3 讓Servlet在web.xml中的配置參考




複製代碼

程式碼如下：

; ; CheckSaveServlet; com.ljb.ttt.servlet.CheckSaveServlet;

CheckSaveServlet;

/CheckSaveServlet;



4付上本次後台呼叫的一個關鍵方法，將查詢轉換為JSON資料格式的方法




複製程式碼

程式碼如下：

//回傳 DataType {"tittle":[{"colName":"val",..},{},{}]}
public String getJsonStr(String sql,String jsonName){
字串jsonStr = "";
字串 tjson = "";
連接 con = null;
結果集 rs = null;
PreparedStatement pst = null;
con = sh.getConnection();
HashMap; hm = sh.select(con, pst, rs, sql, null);
rs = (ResultSet)hm.get("ResultSet");
int colNum;
嘗試{
colNum = rs.getMetaData().getColumnCount();
String colName[] = new String[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請求得到，這是非常影響性能的，如果能實現將一次ajax請求，一次解析獲取全部需要的數據，那就比較好了出彩了（雕刻JSON就是的選擇）。 >