ajax连接jsp或servlet,获取MySql为数据
2013-09-15 16:54
459 查看
当然代码并没有严格按规范写。。。数据库连接和操作的代码应该单独写出来。。。 html 页面中的JS代码也应该单独写一个JS文件,然后引入页面即可。其次,jsp中的代码写到servlet中效果是一样的。。。
1.html代码:
Java代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="">
var xmlHttp;
//创建xmlHttpRequest对象
function createXmlHttpObject()
{
if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}else if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;
}
function send()
{
xmlHttp = createXmlHttpObject();
var url = "refreshAjax.jsp?time="+Math.random(); //加一个随机数,解决浏览器缓存问题
if(xmlHttp)
{
xmlHttp.onreadystatechange =callback; //注册回调函数名,只需要函数名,不要加括号
//设置连接信息:
//第一个参数:表示http的请求方式,主要使用get和post
//第二个参数:表示请求的URL地址,get方式的请求参数也在URL中
//第三个参数:表示采用同步还是异步方式进行交互,true表示异步交互
xmlHttp.open("GET", url, true);
//发送数据,开始和服务器端进行交互
//同步方式下,send语句会在服务器端返回数据后才执行
//异步方式下,send语句会立即执行
xmlHttp.send(null);
}else{
alert("your browser does not support ajax");
return;
}
}
//回调函数
function callback()
{
//判断对象的状态是交互完成
if(xmlHttp.readyState == 4)
{
//判断http的交互是否成功
if(xmlHttp.status==200)
{
//获取服务器端返回的数据
var xmlDoc = xmlHttp.responseXML;
document.getElementById("name").innerHTML = xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;
document.getElementById("tel").innerHTML = xmlDoc.getElementsByTagName("tel")[0].childNodes[0].nodeValue;
document.getElementById("city").innerHTML = xmlDoc.getElementsByTagName("city")[0].childNodes[0].nodeValue;
}else{
alert(xmlHttp.statusText);
}
}
}
function refresh()
{
window.setInterval("send()",1000); //定时刷新
}
</script>
</head>
<body onload="refresh()">
<form action="">
选择用户:
<select name="employees" onchange="send(this.value);">
<option value="Tom">Tom</option>
<option value="Jom">Jom</option>
<option value="Sun">Sun</option>
</select>
</form>
用户名称:
<span id="name"></span>
<br>
电话:
<span id="tel"></span>
<br>
城市:
<span id="city"></span>
<br>
</body>
</html>
2。Jsp代码:
连接的是MySql数据库。。。
Java代码
<%@ page language="java" import="java.sql.*" pageEncoding="gb2312"%>
<%
//这句至关重要,一定注意
response.setContentType("text/xml;charset=gb2312");
StringBuffer str=new StringBuffer();
try {
Class.forName("com.mysql.jdbc.Driver");
String url="jdbc:mysql://localhost:3306/devimonitor?";
String userName="root";
String password="root";
Connection con=DriverManager.getConnection(url,userName,password);
Statement stmt=con.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE,ResultSet.CONCUR_UPDATABLE);
String sql="select * from position order by id";
ResultSet rs=stmt.executeQuery(sql);
if(rs.last())
{
str.append("<information>");
str.append("<name>");str.append(rs.getString(1).trim());str.append("</name>");
str.append("<tel>");str.append(rs.getString(2).trim());str.append("</tel>");
str.append("<city>");str.append(rs.getString(3).trim());str.append("</city>");
str.append("</information>");
}
stmt.close();
con.close();
rs.close();
} catch (Exception e)
{
e.printStackTrace();
}
out.print(str.toString());
%>
1.html代码:
Java代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="">
var xmlHttp;
//创建xmlHttpRequest对象
function createXmlHttpObject()
{
if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}else if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;
}
function send()
{
xmlHttp = createXmlHttpObject();
var url = "refreshAjax.jsp?time="+Math.random(); //加一个随机数,解决浏览器缓存问题
if(xmlHttp)
{
xmlHttp.onreadystatechange =callback; //注册回调函数名,只需要函数名,不要加括号
//设置连接信息:
//第一个参数:表示http的请求方式,主要使用get和post
//第二个参数:表示请求的URL地址,get方式的请求参数也在URL中
//第三个参数:表示采用同步还是异步方式进行交互,true表示异步交互
xmlHttp.open("GET", url, true);
//发送数据,开始和服务器端进行交互
//同步方式下,send语句会在服务器端返回数据后才执行
//异步方式下,send语句会立即执行
xmlHttp.send(null);
}else{
alert("your browser does not support ajax");
return;
}
}
//回调函数
function callback()
{
//判断对象的状态是交互完成
if(xmlHttp.readyState == 4)
{
//判断http的交互是否成功
if(xmlHttp.status==200)
{
//获取服务器端返回的数据
var xmlDoc = xmlHttp.responseXML;
document.getElementById("name").innerHTML = xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;
document.getElementById("tel").innerHTML = xmlDoc.getElementsByTagName("tel")[0].childNodes[0].nodeValue;
document.getElementById("city").innerHTML = xmlDoc.getElementsByTagName("city")[0].childNodes[0].nodeValue;
}else{
alert(xmlHttp.statusText);
}
}
}
function refresh()
{
window.setInterval("send()",1000); //定时刷新
}
</script>
</head>
<body onload="refresh()">
<form action="">
选择用户:
<select name="employees" onchange="send(this.value);">
<option value="Tom">Tom</option>
<option value="Jom">Jom</option>
<option value="Sun">Sun</option>
</select>
</form>
用户名称:
<span id="name"></span>
<br>
电话:
<span id="tel"></span>
<br>
城市:
<span id="city"></span>
<br>
</body>
</html>
2。Jsp代码:
连接的是MySql数据库。。。
Java代码
<%@ page language="java" import="java.sql.*" pageEncoding="gb2312"%>
<%
//这句至关重要,一定注意
response.setContentType("text/xml;charset=gb2312");
StringBuffer str=new StringBuffer();
try {
Class.forName("com.mysql.jdbc.Driver");
String url="jdbc:mysql://localhost:3306/devimonitor?";
String userName="root";
String password="root";
Connection con=DriverManager.getConnection(url,userName,password);
Statement stmt=con.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE,ResultSet.CONCUR_UPDATABLE);
String sql="select * from position order by id";
ResultSet rs=stmt.executeQuery(sql);
if(rs.last())
{
str.append("<information>");
str.append("<name>");str.append(rs.getString(1).trim());str.append("</name>");
str.append("<tel>");str.append(rs.getString(2).trim());str.append("</tel>");
str.append("<city>");str.append(rs.getString(3).trim());str.append("</city>");
str.append("</information>");
}
stmt.close();
con.close();
rs.close();
} catch (Exception e)
{
e.printStackTrace();
}
out.print(str.toString());
%>
相关文章推荐
- 如何用 ajax 连接mysql数据库,并且获取从中返回的数据。ajax获取从mysql返回的数据。responseXML分别输出不同数据的方法。
- jsp 通过 Ajax 和servlet之间的连接及数据传递示例
- JSP 连接 MySQL 数据库&获取数据库数据
- php7用mysqli连接mysql获取数据乱码问题
- jsp获取servlet中数据
- Servlet如何获取ajax中以json格式传入的数据
- 使用JSP、servlet和ajax实现无刷新获取验证码
- JSP+Servlet+MySQL完成将数据库中的数据显示到页面
- jsp连接MySQL操作GIS地图数据,实现添加point的功能
- 使用servlet,jdbc将mysql中数据显示在jsp页面中,且实现直接删除数据库数据
- JSP中获取ExtJS.Ajax前台传递的JSON数据实现过程
- java/jsp/servlet连接mysql实现用户登录
- 数据库中的记录通过servlet回显到jsp页面中(连接数据库或者查询參照:对数据进行增删改查)
- ajax获取servlet发送的数据
- Servlet+JSP+MySQL实现用户管理模块之一、数据库表设计及创建
- 从jsp页面发送ajax请求,servlet接受参数并返回json数据
- JSP简单练习-用Servlet获取表单数据
- JavaWeb将数据包装成JSON以及JSP通过ajax对JSON的获取与解析(代码实例)
- Jsp默认打开页面无数据访问Servlet获取数据
- jsp+servlet+ajax+oracle数据库-实现简单的登陆、注册、找回密码功能(与Oralce数据库连接)