Home > Developer > JavaScript
I haven't written any code for a long time, and my hands are itchy. The implementation of some functions of my younger siblings has really affected the project progress, so I wrote a piece of code myself.
Function: Display js frontend by PAGE + response to background data (JAVA Servlet)
Framework: jquery1.8.7
The purpose of this article: Let's take a look at the first-entry software development. If you like it, let's also look at it. copy it here and copy it to make a table handsome;
1. programmers should sit down carefully and practically;
2. The program needs to be invested in order to reap the harvest;
3. Only when gains are made can we be encouraged and motivated to continue step by step!
The code below will contain a small comment
1. Web page logic processing (js Code writing to a page has a benefit, and debugging will not be affected by the cache of js files)
Copy codeThe 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> order settlement </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">
Purchase order status:
<Select id = "orderstatus">
<Option value = "" SELECTED>-search all! -</Option>
<Option value = "closed"> closed </option>
<Option value = "part"> part </option>
<Option value = "closed"> closed </option>
</Select>
<Input type = "button" style = "height: 25px; width: 70px" value = "query" 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">
// Fill in page information
Function writePageList (curpage, wholePage ){
Var pageContent = "";
If (curpage! = 1 ){
PageContent + = "<a href = '# 'onclick = 'findpage (1)' style = 'text-decoration: none'> <B style = 'font-size: 12'> page 1 </B> </a> ";
PageContent + = "<a href = '# 'onclick = 'findpage (" + (parseInt (curpage)-1) + ") 'style = 'text-decoration: none '> <B style = 'font-size: 12'> previous page </B> </a> ";
}
If (curpage! = WholePage ){
PageContent + = "<a href = '# 'onclick = 'findpage (" + (parseInt (curpage) + 1) + ") 'style = 'text-decoration: none '> <B style = 'font-size: 12'> next page </B> </a> ";
PageContent + = "<a href = '# 'onclick = 'findpage (" + (parseInt (wholePage) + ") 'style = 'text-decoration: none'> <B style = 'font-size: 12'> last page </B> </a> ";
}
If (1 = wholePage ){
PageContent + = "<a href = '# 'onclick = 'findpage (" + (parseInt (wholePage) + ") 'style = 'text-decoration: none '> <B style = 'font-size: 12'> only one page </B> </a> ";
}
PageContent + = "page number: <label id = 'curpage' style = 'color: red; font-size: 13 '> "+ curpage +" </label>/<label id = 'wholepage' style = 'color: red; font-size: 13 '> "+ wholePage +" </label> ";
PageContent + = "<input id = 'page' type = 'text' size = '5'/> <input type = 'button 'style = 'height: 25px; width: 55px 'value = '> jump to 'onclick = 'gotopage ()'/> ";
// Alert (pageContent );
$ ('# Pagelist'). empty ();
$ ('# Pagelist'). append ("<tr> <td>" +
PageContent
+ "</Td> </tr> ");
}
// Your order status
Function changeStatus (orid ){
Var status = $ ('# status' + orid). val ();
If (status = null | status = undefined ){
Alert ("status information cannot be blank! ");
Return;
}
$. Post ("DetailChange ",{
Etype: 11,
Orid: orid,
Status: status
}, Function (data ){
If (parseInt (data)> 0)
Alert ("the status is successful ");
Else
Alert ("failed to modify ");
});
}
// Query 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 in table data
Function writeContent (data ){
// Alert (data );
Var content = data. Orders;
$ ('# Contentlist'). empty ();
$ ('# Contentlist'). append ("<tr>" +
"<Td> <B style = 'font-size: 16'> purchase no. </B> </td>" +
"<Td> <B style = 'font-size: 16'> handled by </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> <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>" +
"<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> uncompleted </option>" +
"<Option value = 'uncompleted '> uncompleted </option>" +
"<Option value = 'part'> part </option>" +
"<Option value = 'closed '> closed </option>" +
"</Select> </td>" +
"<Td> <input type = 'button 'value = 'modify status' style = 'height: 25px; width: 80px 'onclick = 'changestatus (" + String (item. orid) + ") '/> </td>" +
"<Td> <input type = 'button 'value = 'View Details' style = 'height: 25px; width: 80px 'onclick = 'findorderdetail (" + String (item. orid) + ") '/> </td>" +
"</Tr> ";
// Alert (tdc );
$ ('# Contentlist'). append (tdc );
});
}
// Used 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 call
Function firstFindPage (pageId ){
FindPage (pageId );
}
// Used for page Jump response logic processing, that is, Jump directly from the input page to the ground
Function gotoPage (){
Var ppage = $ ('# ppage'). val ();
Var maxpage = $ ('# wholepages'). innerHTML;
// Determines whether the numint () function 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 request page does not have a page number! ");
Return;
}
FindPage (ppage );
};
// Judge 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. the JAVA code returned by the background page (that is, a standard Servlet)
Copy codeThe 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;
// Process the incorrect page judgment
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 ){
// Obtain
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. Let Servlet configuration reference in web. xml
Copy codeThe Code is as follows:
<! -- Various inventory items -->
<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. Pay for a key method called in the background to convert the query to the JSON data format.
Copy codeThe Code is as follows:
// 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;
}
Note:
1. method calls that have not been seen in it. Don't worry. There is no problem connecting to the database through java;
2. There is a disadvantage in this case. The page information and page data are obtained in two AJAX requests, which greatly affects the performance. If you can perform an ajax request, it is a good choice to retrieve all the data needed for one resolution (nested JSON is a good choice ).
3 because it is not dedicated to web development, it is still very difficult to combine the CSS style.
Last Post:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
