通过jsp连接数据库在d3选择器里使用数据

通过jsp连接数据库在d3选择器里使用数据

想在网页里完成一个功能，当鼠标移入地图的时候可以显示该国家所对应的疫情数据，地图功能需要d3.json来实现，而jsp读取数据库使用<%=%>是不能在里使用的，需要在body标签下读取数据库的内容。

所以我想到一个办法，就是在body标签下，先把所有数据读入到一个table里，然后让这个表格的透明度设置为0，这样用户实际上的看不到这个表格的，然后在d3里，调用表格中的数据即可。

1. jdbc连接数据库

// 1.加载驱动
//	DriverManager.registerDriver(new Driver());  这样会导致驱动两次 因为加载这个类的时候，里面有静态代码块，会执行一次该语句注册
Class.forName("com.mysql.cj.jdbc.Driver");//加载此类，自动执行里面的静态代码块
// 2.获得连接
Connection conn =DriverManager.getConnection("jdbc:mysql://localhost:3306/dataviz"+"?useSSL=false&serverTimezone=Hongkong&useUnicode=true&characterEncoding=utf-8", "root", "zz19961029");
if(conn != null){  
//out.print("数据库连接成功！");  
//out.print("<br />");              
	Statement stmt = null;  
	ResultSet rs = null;  
	String sql = "SELECT * FROM world0503 where sure > 2900 order by sure DESC;";  //查询语句
	stmt = conn.createStatement();  
	rs = stmt.executeQuery(sql);  
	//out.print("查询结果：");
}

2. 数据放入到表格中

 <tr>  
  <td width="100"><%=rs.getString("country") %></td>  
  <td width="100"><%=rs.getInt("sure") %></td>  
  <td width="100"><%=rs.getInt("cured") %></td>  
  <td width="100"><%=rs.getInt("death") %></td>  
  <td width="100"><%=rs.getString("nation") %></td>  
</tr>

3. 定义表格搜索函数

//定义前端表格搜索函数
function onSearch(idStr){
    var storeId = document.getElementById("dataTable");
    var rowsLength = storeId.rows.length;//表格里一共的行数
    for(var i = 1 ; i < rowsLength ; i++){
    var tableText = storeId.rows[i].cells[0].innerHTML;
    //alert(tableText);
    var thisText = document.getElementById(idStr).innerHTML;
    //alert(thisText);
    if(thisText.match(tableText)){
  	    var nation = storeId.rows[i].cells[4].innerHTML;
        var sure = storeId.rows[i].cells[1].innerHTML;
        var cured = storeId.rows[i].cells[2].innerHTML;
        var death = storeId.rows[i].cells[3].innerHTML;                 document.getElementById("mydiv").innerHTML="国家："+nation+"<br/>确诊人数："+sure+"<br/>治愈人数："+cured+"<br/>死亡比："+(death/sure*100)+"%";
    }
}