Ajax json 兑现 异步交互获取数据库数据
日期：2014-05-16 浏览次数：20429 次
Ajax json 实现 异步交互获取数据库数据
这个例子主要 实现了数据的迁移 能在选择了数据库后能自动的将数据库中中的表名在页面上展示
运用了 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",t
这个例子主要 实现了数据的迁移 能在选择了数据库后能自动的将数据库中中的表名在页面上展示
运用了 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",t
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
