|
这个例子主要 实现了数据的迁移 能在选择了数据库后能自动的将数据库中中的表名在页面上展示
运用了 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("OST","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.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);
}
}
} |
|