Ajax json 实现异步交互获取数据库数据

ztfjava

浏览: 72718 次
性别:
来自: 北京

最近访客更多访客>>

William.K

隐匿的轨迹

sonull

q445862108

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Java

json Ajax Java SQL DAO

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

运用了 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);
   }
}

}

分享到：

Oracle10g 操作大对象 | 在普通的Java类中调用JSP内置对象

2010-09-13 20:15
浏览 6506
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论