`
ztfjava
  • 浏览: 72696 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

    博客分类:
  • Java
阅读更多
这个例子主要  实现了数据的迁移 能在选择了数据库后能自动的将数据库中中的表名在页面上展示

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

}


分享到:
评论

相关推荐

    ajax异步获取数据库数据绘制Echarts图表demo

    【标题解析】 "ajax异步获取数据库数据绘制...以上就是关于"ajax异步获取数据库数据绘制Echarts图表demo"所涵盖的关键知识点,通过学习和实践,我们可以掌握如何结合Ajax和Echarts创建动态、交互式的数据可视化应用。

    Ajax中使用JSON传输数据

    通过`json.js`和`json.jar`这样的工具,我们可以方便地在JavaScript和Java环境中进行JSON的序列化和反序列化操作,从而实现数据的传递和解析。在实际开发中,还需要注意安全问题,如避免XSS和CSRF攻击,以及优化网络...

    Ajax实现下拉列表从数据库读取数据级联

    本文将深入探讨如何使用Ajax实现下拉列表(Dropdown List)从数据库读取数据并实现级联效果。级联下拉列表通常用于关联数据的筛选,例如省份-城市-区县的选择,当用户在一级下拉列表中选择一个选项时,二级下拉列表...

    AjaxJson 实例 AjaxJson

    AjaxJson 是一种在 Web 应用程序中实现异步数据交换的技术,它结合了 AJAX(Asynchronous JavaScript and XML)和 JSON(JavaScript Object Notation)的优势,使得网页可以在不刷新整个页面的情况下与服务器进行...

    AJAX学习实例与数据库交互实例

    本学习实例集主要涵盖了AJAX与数据库交互的各种应用,包括数据的增删改查、异步提交等常见操作,提供了丰富的实践案例。 一、AJAX基础 1. XMLHttpRequest对象:AJAX的核心是XMLHttpRequest(XHR)对象,它允许在...

    $.ajax json数据传递方法.docx

    $.ajax json 数据传递方法是使用 jQuery 库实现的异步数据传递方法,通过将 JSON 数据封装在 $.ajax 对象中,并将其作为参数传递给服务器端脚本,以实现客户端和服务器端之间的数据交互。 在前台代码中,首先定义了...

    Ajax实现定时刷新,获取后台数据实现技术

    本篇文章将深入探讨如何利用Ajax实现定时刷新,以便实时获取后台数据。 一、Ajax基础 1. XMLHttpRequest对象:Ajax的核心是XMLHttpRequest(XHR)对象,它是JavaScript的一个内置对象,允许我们向服务器发送异步...

    ajax+json实例

    通过理解并熟练掌握AJAX的异步通信机制以及JSON的数据交换格式,开发者能够构建出更加高效、流畅的Web应用。在实际开发中,还需要考虑错误处理、安全性、性能优化等多方面因素,确保系统的稳定性和可靠性。

    ajax和beego前后端json格式数据交互实例

    在前端,我们可以使用JavaScript的`fetch` API或者jQuery的`$.ajax`方法发起异步请求,获取或发送JSON数据。比如,使用jQuery的Ajax: ```javascript $.ajax({ url: '/api/users/1', type: 'GET', dataType: '...

    JavaWeb通过ajax、json实现省市二级联动

    这项功能的实现通常涉及到前端JavaScript技术,如AJAX(Asynchronous JavaScript and XML)和JSON(JavaScript Object Notation),以及后端的Java Servlet和数据库交互。以下将详细介绍如何使用这些技术实现省市二...

    基于ASP.NET+XML +JSON实现的Ajax 异步数据操作程序源码例子

    这个源码例子展示了如何在ASP.NET框架下利用Ajax技术进行异步数据操作,结合XML和JSON这两种数据交换格式,来提高Web应用的用户体验。接下来,我们将详细探讨这些知识点。 首先,ASP.NET是微软公司推出的一种用于...

    SSH+jQuery+json 实现的Ajax操作,绝对精华,代码简练清晰,绝对能看明白

    总结来说,这个压缩包提供的示例是一个基于SSH后端、jQuery前端和JSON数据交换的Ajax级联操作实现,旨在展示如何优雅地处理Web应用中的动态数据加载。这种技术组合大大提高了用户体验,因为用户无需刷新整个页面就能...

    springmvc + jquery + ajax + json 异步传递数据

    实现SpringMVC、jQuery、Ajax和JSON的异步传递数据,首先需要配置SpringMVC的DispatcherServlet和相关映射。在`web.xml`中,你需要定义一个Servlet来处理所有的HTTP请求。然后,在SpringMVC的配置文件中,设置视图...

    ZTree+Struts2+ajax+json实现checkbox权限树

    【标题】"ZTree+Struts2+ajax+json实现checkbox权限树"涉及的技术栈主要集中在前端的ZTree,后端的Struts2框架,以及数据交互中的Ajax和JSON。这个项目的核心目标是构建一个可复选的权限树形结构,用户通过勾选节点...

    Ajax与servlet后台交互,数据类型JSON

    总结,Ajax与Servlet结合使用,搭配JSON作为数据交换格式,可以实现高效、灵活的前后端通信。对于初学者来说,理解这些基本概念和实践操作是迈进Web开发的重要一步。在实际项目中,可以结合前端框架如jQuery、Vue.js...

    AJAX Servlet实现数据异步交互的方法

    AJAX Servlet实现数据异步交互的方法 本篇文章主要介绍了AJAX Servlet实现数据异步交互的方法,通过使用Servlet作为服务器端程序,使用AJAX技术实现客户端与服务器端的数据异步交互。 标题解释 AJAX Servlet实现...

    ajax异步获取数据

    在jQuery中,`$.ajax()`函数是实现异步数据请求的核心方法。通过这个函数,开发者可以定制请求的各个方面,如URL、请求类型(GET或POST)、数据类型(JSON、HTML、XML等)、发送的数据以及成功或失败时的回调函数。 ...

    使用ajax实现异步提交的例子

    服务器端的`get_cities_by_province.php`通常会接收到`provinceId`参数,查询数据库获取对应省份的城市,然后以JSON格式返回结果。这个过程可以使用PHP、Python、Node.js或其他后端语言实现。 总结一下,这个例子...

    ajax实现异步通信

    **Ajax 实现异步通信详解** Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,大大提升了用户...

Global site tag (gtag.js) - Google Analytics