通过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>

最终页面返回结果

通过ajax/servlet将数据库数据显示在页面上

通过ajax/servlet将数据库数据显示在页面上

猜你喜欢