Ajax json 实现异步交互获取数据库数据 -优快云博客

本文链接：https://blog.youkuaiyun.com/ThinkingInjavaztf/article/details/83708589

这个例子主要实现了数据的迁移能在选择了数据库后能自动的将数据库中中的表名在页面上展示

运用了 Ajax动态交互

1.界面：其中的重点为javaScript 的部分主要实现了异步交互

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

</head>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

<body style="margin: 0 auto; text-align: center;">
<div style="margin: 0 auto;border: 1px #f4f4f4 solid;width: 800px;height: 500px;background-color:#E8F2FE; ">
<form action="ChangeDBAction" method="post">
<div style="background-color: #DA70D6;width: 300px;text-align: left;">
选择数据库
<select id="outDb" name="outDb" onChange="getNewTableName()">
<option>Oracle10g</option>
<option>SQL2005</option>
</select>
</div>

<div style="margin-top: 10px;background-color: #D8BFD8;width: 300px;text-align: left;">
导出库的IP地址<input type="text" name="ip" style="width: 100px;"/>
</div>
<div style="margin-top: 10px;background-color: #EE82EE;width: 300px;text-align: left;">
请输入用户名<input type="text" name="user" style="width: 100px;"/>
</div>
<div style="margin-top: 10px;background-color: #DDA0DD;width: 300px;text-align: left;">
请输入密码<input type="password" name="pwd" style="width: 100px;"/>
</div>
<div style="margin-top: 10px;background-color:#778899;width: 300px;text-align: left;">
选择表<select id="tableNames" name="table" style="width: 200px;"></select>
</div>
<div style="margin-top: 10px;background-color: #FF00FF;width: 300px;text-align: left;">
导入数据库
<select name="inDb">
<option>Oracle10g</option>
<option>SQL2005</option>
</select>
</div>
<div style="margin-top: 10px;background-color: #FF00FF;width: 300px;text-align: left;">
导入库IP<input type="text" name="outIP" style="width:100px;"/>
</div>
<div style="margin-top: 10px;background-color: #FF00FF;width: 300px;text-align: left;">
导入库名<input type="text" name="outName" style="width:100px;"/>
</div>
<div style="margin-top: 10px;background-color: #B0C4DE;width: 300px;">
<input type="submit" value="导入"/>
</div>
</form>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
getTableName();
});
function getNewTableName(){
var obj = document.getElementById("tableNames");
while(obj.childNodes.length){
obj.removeChild(obj.childNodes[0]);
}
getTableName();
}
function getTableName(){
var xmlhttp ;
if(window.ActiveXObject){
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
alert("您的浏览器版本太低请更新");
}
if(xmlhttp!=null){
xmlhttp.onreadystatechange = handleStateChange;
xmlhttp.open("POST","GetTableNameModel",true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var name= $("#outDb").val();
xmlhttp.send("typeDb="+name);
}
function handleStateChange(){
if(xmlhttp.readyState==4){
if(xmlhttp.status==200){
var json = eval( '('+ xmlhttp.responseText +')');
for(var i=0;i<json.TABLES.length;i++){
$("#tableNames").append("<option>"+json.TABLES[i].TABLE+"</option>");
}
}
}
}
}
</script>

2.dao层取得数据后封装成 json 后返回到客户端重点是其中将数据转换成json字符串返回的操作

package com.ztf.dao;

import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

import org.jdom.Element;

import com.url.ajax.json.JSONObject;
import com.ztf.Idao.ITableDao;
import com.ztf.util.GetConnection;

public class GetOracleTableName implements ITableDao {

public String getAllTableName(String table) {

String sql="select * from tab";
Connection conn = null;
Statement st = null;
ResultSet rs = null;
conn = GetConnection.getconn();
List<HashMap<String,String>> list = new ArrayList<HashMap<String,String>>();
HashMap<String,Object> result = new HashMap<String,Object>();
try {
st = conn.createStatement();
rs = st.executeQuery(sql);
while(rs.next()){
HashMap<String,String> map = new HashMap<String,String>();
map.put("TABLE", rs.getString(1));
list.add(map);
}
result.put("TABLES", list);
} catch (SQLException e) {
e.printStackTrace();
}finally{
try {
rs.close();
st.close();
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
JSONObject jsonObject = new JSONObject(result);
String json = jsonObject.toString();
return json;
}
}

3.请求的 servlet的代码为：

package com.ztf.model;

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 org.jdom.Element;

import com.ztf.dao.GetOracleTableName;
import com.ztf.dao.GetSqlTableName;

public class GetTableNameModel extends HttpServlet {
public GetTableNameModel() {
super();
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
String name = request.getParameter("typeDb");
if(name.equals("Oracle10g")){
GetOracleTableName getName = new GetOracleTableName();
String json = getName.getAllTableName("");
out.print(json);

}else if(name.equals("SQL2005")){
GetSqlTableName getName = new GetSqlTableName();
String json = getName.getAllTableName("");
out.print(json);
}
}

}