- 浏览: 69853 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
liyuanhoa:
SSH 和FreeMarker 动态网页生成静态技术 事例 -
xiao-qiang163:
做的项目,界面很花哨, “好看”但不中用。
做的项目的截图
这个例子主要 实现了数据的迁移 能在选择了数据库后能自动的将数据库中中的表名在页面上展示
运用了 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动态交互
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);
}
}
}
发表评论
-
java读取text乱码
2011-06-16 09:01 1261Java读取TXT文本文件乱码 ... -
java swing 列别介绍
2011-06-15 12:43 702在IBM的论坛上看到一篇比较好的文章晒出来给大家看看 [url ... -
URL 中的#号的作用
2011-04-07 09:30 683本文转载于: http://news.cnblogs.com/ ... -
类的序列话 和反序列话
2011-03-30 11:40 711public static String SerializeT ... -
一种做输入的校验 同是可以验证不让粘贴复制
2011-03-29 17:28 795jQuery(function($){ $(" ... -
div中的字体溢出 保证制动换行 ie 火狐兼容
2011-03-25 12:04 963在定义div是加如下样式,可能还会有好多的情况 这个就要视情况 ... -
div 的自动扩充 火狐 ie的兼容
2011-03-22 16:35 717好久没有发表文章了 今天在修改页面的时候用到了 div 的自动 ... -
Hibernate中的lazy的使用说明
2010-12-21 22:50 724好久没有看有关hibernate ... -
DWR+JSON实现的万能的N级联动
2010-12-19 19:35 799在我们的项目中用到了一个查询分类的地方要用到N级联动具体是多少 ... -
js 实现的div点击上下 进行滚动翻页的function
2010-12-11 22:58 1154... -
各种浏览器之间的兼容性问题
2010-12-06 13:24 540http://blog.csdn.net/vince6799/ ... -
Struts文件上传
2010-11-29 00:46 793今天在项目中遇到了一个非常恶心的问题,用到了struts2的文 ... -
在tomcat中直接配置加载workSpace中的项目
2010-11-27 12:48 1061在service.xml 文件中添加 一下配置即可,免去了从新 ... -
在项目中发短信的小例子
2010-11-21 15:32 613... -
java中日志的处理
2010-11-13 09:49 677在web.xml文件中配置 log4j <!-- 上下 ... -
java创建解析xml
2010-11-10 07:29 865这几天老是有人问如何用java 生成xml文件,以前自己也看到 ... -
java
2010-11-09 09:26 701public class EncryptUtil { pri ... -
JDBC的数据类型
2010-10-14 15:10 644数值型整型 JDBCtinyint ja ... -
Hibernate 处理Oracle的大对象Clob
2010-10-12 08:20 876Hibernate+Oracle+CLOB的读写其实只要这样做 ... -
Java读取Properties文件
2010-10-11 17:28 618使用J2SEAPI读取Properties文件的六种方法 1 ...
相关推荐
在.NET中使用AJAX技术来做服务器端和客户端交互,用JSON做为在异步应用程序中发送和接收信息的数据格式。
1.3.1提供的API中,最完整的方法是jQuery.ajax(options),同时她也是jQuery底层AJAX实现,简单容易的高层实现大家可以看下API中提供的jQuery.get(options)、jQuery.post(options),以及配合JSON做为传输数据格式的方法...
前端使用Bootstrap进行页面布局和美化,通过Ajax与后端进行交互,实现数据的传输和动态展示。 商品模块:展示商品的列表,包括商品的名称、价格、图片等信息。用户可以通过关键字搜索、按照分类浏览商品。通过Ajax...
ajax与struts2,json结合实现异步交互,网页的局部刷新。当初在网上没找到全的,希望这个对刚接触的人有所帮助啊\(^o^)/~
通过使用POST和GET请求,实现了数据的异步处理。项目主要采用Python语言编写,同时包含了JavaScript、HTML、Shell、CSS及TypeScript等多种开发语言,以丰富项目的功能和交互体验。 文件结构:项目共计277个文件,...
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新,这样就可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 XMLHttpRequest 是 AJAX 的基础,用于和服务器交换数据。所有现代浏览器均...
在AJAX里边,当用户查看和与页面交互的时候,页面的JavaScript代码向web服务器请求数据(AJAX里的“异步”)。这些请求是HTTP请求,就像一个浏览器在第一个地方取得页面,其中可以包括任意图片,样式表等等。同样的...
本套Java教程涵盖Ajax的实现原理,XMLHttpRequest实现Ajax,回调函数,Ajax数据交换格式(HTML、XML、JSON),Ajax发送GET和POST请求,异步编程模型和同步编程模型,解决Ajax的GET请求缓存问题,使用Ajax验证用户名...
通过使用 JavaScript 和 XMLHttpRequest 对象,可以实现异步加载数据、动态更新网页内容、交互式用户界面等功能。 Ajax 技术的优点在于可以提高网页的响应速度和用户体验,减少带宽占用,降低服务器负载。同时,...
JSON适用于进行数据交互的场景,典型的是Ajax中实现异步加载;为了支持跨平台、数据安全等的Web Service也可以使用(API接口返回值)。 JSON(JavaScript Object Notation)是一种完全独立于语言的、轻量级的数据交换...
json在异步加载传输的使用,通过ajax跟数据库交互而不影响前台的操作。 返回的数据是被封装成JSON对象。可用用途如:动态获取列表、即时修改页面数据等等
这圣思园张老师的一个上课演示文件,讲的是struts2+jquery+Ajax实现异步交互的简单例子。
由于有实现数据库和后台模块等功能,通过AJax请求完成整个前台功能的数据交互, 后期再考虑实现一个后台管理系统及数据库系统,还有前原材料,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、...
json数据在ajax实现异步交互时起到了很重要的作用,他可以返回请求的数据,然后利用客户端的js进行解析,这一点体现出js的强大,本文介绍JS解析json数据并将json字符串转化为数组的实现方法,需要了解的朋友可以参考...
整个系统使用bootstrap框架搭建前端页面,使用原生js+Ajax+PHP的方式实现前端与后端的数据交互,前端使用post或get的方式发送请求,PHP使用$_GET、$_POST等方式接受数据,将处理后的数据以json字符串的方式返回。...
即用Javascript语言与服务器进行异步交互,传输的数据为XML,(现在使用更多的是json数据)。 向服务器发送请求的途径 1.浏览器地址栏 http://www.baidu.com 默认是get请求 2.form表单发送请求: GET请求 POST请求 3...
由于没有实现数据库和后台模块等功能, 项目的测试数据我采用的是JSON格式的数据文件,通过AJax请求完成整个前台功能的数据交互, 后期再考虑实现一个后台管理系统及数据库系统,还有前端页面资源的异步加载及优化。
后台框架:springboot 2.7.0+Flowable6.7.2+ mybaits+maven+接囗前端页面:html +vuejs 形式jquery ajax 异步跨域json 格式数据交互 前后分离,前后台分开部署(特别注意,前端用的vue.js,就是html页面引入vue.js形式,...
json格式想必大家会很熟悉;因为他在ajax异步应用中会显得很有魅力,有些新手朋友对其有点陌生,接下来介绍前台如何解析json格式以及后台如何生成json格式等,需要了解的朋友可以参考下