通过ajax/servlet将数据库数据显示在页面上
通过ajax/servlet将数据库数据显示在页面上
数据库信息
web.xml
<servlet>
<description>This is the description of my J2EE component</description>
<display-name>This is the display name of my J2EE component</display-name>
<servlet-name>GetAllDesignReportServlet</servlet-name>
<servlet-class>SERVLET.GetAllDesignReportServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>GetAllDesignReportServlet</servlet-name>
<url-pattern>/GetAllDesignReportServlet.do</url-pattern>
</servlet-mapping>
- GetAllDesignReportServlet
package SERVLET;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONException;
import org.json.JSONObject;
import DAO.DesignReportDAO;
public class GetAllDesignReportServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
DesignReportDAO dao=new DesignReportDAO();
ArrayList<JSONObject> array = null;
try {
array = dao.select_all();
} catch (JSONException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
response.setContentType("text/html;charset=utf-8");
PrintWriter pw = response.getWriter();
pw.print(array.toString());
}
}
- DesignReportDAO
package DAO;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import org.json.JSONException;
import org.json.JSONObject;
public class DesignReportDAO extends DataSourceConfig {
private static String SELECT_ALL_Design_Report = "SELECT * FROM design_report_view";
private Connection conn = null;
private PreparedStatement pstmt = null;
private ResultSet rst = null;
//查询所有设计报告
public ArrayList<JSONObject> select_all() throws JSONException
{
try{
conn = super.getConnection();
pstmt = conn.prepareStatement(SELECT_ALL_Design_Report);
rst = pstmt.executeQuery();
ArrayList<JSONObject> array = new ArrayList<JSONObject>();
while(rst.next())
{
JSONObject bean = new JSONObject();
bean.put("elevator_no", rst.getString("elevator_no"));
bean.put("elevator_name", rst.getString("elevator_name"));
bean.put("design_person", rst.getString("design_person"));
bean.put("enterprise_code", rst.getString("enterprise_code"));
bean.put("name", rst.getString("name"));
bean.put("elevator_type", rst.getString("elevator_type"));
bean.put("design_date", rst.getString("design_date"));
bean.put("design_result", rst.getString("design_result"));
array.add(bean);
}
pstmt.close();
rst.close();
return array;
}catch(SQLException e){
System.out.println("Error occured at DesignReportDAO->select_all()");
return new ArrayList<JSONObject>();
}finally{
try{
conn.close();
}catch(SQLException e){
System.out.println("Error occured at closing connection in DesignReportDAO");
}
}
}
}
- html页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>all of the reports</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script src="js/jquery.min.js"> </script>
<script src="js/bootstrap-paginator.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="css/style.css" rel='stylesheet' type='text/css' /
</head>
<body align=center>
<div>
<!--<form action="hplus/design_report.jsp" method="post">-->
<table id="searchtable" class="table"
style="width:100%;margin: 0px auto;align:center;">
<tr>
<td align="center">企业名称：<input type="text" id="name" name="name" style="width:30%"></td>
<td align="center">企业代码：<input type="text" id="enterprise_code" name="enterprise_code" style="width:30%"></td>
<td align="center">电梯类型：<select id="elevator_type" name="elevator_type" style="width:40%" >
<option value="">-请选择-</option>
<option value="乘客电梯(住宅)">乘客电梯(住宅)</option>
<option value="自动扶梯">自动扶梯</option>
</select>
</td>
<td align="center">设计时间：<input id="date1" type="text" name="date1" style="width:30%" placeholder="示例： 2019-9-13"> 至 <input
type="text" id="date2" name="date2" style="width:25%" placeholder=" 2019-10-1"></td>
<td align="center"><button id="search_report" onkeyup='searchPORT()' style="height:30px;width:60px;" type="button">搜索</button></td>
</tr>
</table>
</div>
<div style="position:relative;top:50px">
<table id="mytable" class="table" border="1"
style="width:90%;margin: 0px auto;">
<thead>
<tr>
<th colspan="11" style="text-align: center;"><font size="4px"
color="black">设计报告管理</font></th>
</tr>
<tr style="font-size:15px">
<th style="text-align: center;">电梯编号</th>
<th style="text-align: center;">产品名称</th>
<th style="text-align: center;">电梯类型</th>
<th style="text-align: center;">设计单位名称</th>
<th style="text-align: center;">设计单位代码</th>
<th style="text-align: center;">设计人员姓名</th>
<th style="text-align: center;">设计时间</th>
<th style="text-align:center;">附件</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
<script>
var AllDesignReport;
(function () {
$.ajax({
type : 'post',
async : true,
url : 'GetAllDesignReportServlet.do',
dataType : 'json',
success : function(data) {
AllDesignReport=data;
console.log(data);
$("#data").text(data.length);
//初始化一开始的时候加载的时候的分页
$("#tbody").empty();
var str="";
var page=1;
for(var j=0;j<data.length;j++){
str+="<tr><td align='center'>" + data[j].elevator_no + "</td><td align='center'>" + data[j].elevator_name
+ "</td><td align='center'>" + data[j].elevator_type + "</td><td align='center'>" + data[j].name
+ "</td><td align='center'>" + data[j].enterprise_code + "</td><td align='center'>" + data[j].design_person
+ "</td><td align='center'>" + data[j].design_date + "</td><td align='center'><a href='http://localhost:8080/ZDZX_DT/Report.jsp?zdftno="
+ data[j].elevator_no + "' target='_blank'>查看 </a></td></tr>";
}
$("#tbody").show().append(str);//插入节点中
},
error : function() {
alert("无法与数据库取得连接!!!1111");
}
});
}());
</script>
</body>
</html>
- 最终页面返回结果
原文作者：野有蔓兮
原文地址: https://blog.csdn.net/weixin_41104835/article/details/100553628
本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
原文地址: https://blog.csdn.net/weixin_41104835/article/details/100553628
本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
相关文章