当前位置: 首页 > 图文教程 > 网络编程 > JSP > AJAX自学练习 无刷新从数据库后台取数据显示

JSP
Java 创建cookie和删除cookie
jsp 从web.xml读取连接数据库的参数
jsp 不支持EL表达式，解决办法
jsp 获取客户端的浏览器和操作系统信息
struts2 session 解读
struts2 spring整合fieldError问题
jsp 生成验证码代码
搭建java WEB开发环境和应用
JSP 自定义标签
Java 区分文本中的中英文字符函数
通用JSP页面 jsp入门级文章
jsp struts1 标签实例详解
一个jdbc 测试程序代码
SSH整合中 hibernate托管给Spring得到SessionFactory
jsp SmartUpload 实现上传功能代码
jsp Unsupported encoding: gb2312 错误原因
java Struts2 在拦截器里的跳转问题
jsp 对request.getSession(false)的理解（附程序员常疏忽的一个漏洞）
Java 项目生成静态页面的代码
jdk与jre的区别 很形象，很清晰，通俗易懂

No. « 33 34 35 36 »

技术文章搜索

关键字

JSP 中的 AJAX自学练习 无刷新从数据库后台取数据显示

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-11   浏览: 299 ::
收藏到网摘: n/a

AJAX自学练习 无刷新从数据库后台获取数据并显示的代码，大家可以参考下。 请求页面request.jsp
复制代码 代码如下:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script language="javascript"><!--
function GetXmlHttpObject(){
var xmlHttp = null;
try{
xmlHttp = new XMLHttpRequest();
}catch(e){
try{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function showMsg(str){
xmlHttp = GetXmlHttpObject();
if(xmlHttp == null){
alert ("you browser don't support the ajax");
return;
}
var url = "response.jsp";
url = url + "?q="+ str;
url = url + "&sid ="+ Math.random();
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
function stateChanged()
{
if(xmlHttp.readyState==4)
{
document.getElementById("showHint").innerHTML = xmlHttp.responseText;
}
}
// --></script>
</head>
<body>
<form name="form1" action="" method="post">
<p>RocarsId:</p>
<select name="select1" onchange="showMsg(document.form1.select1.options[document.form1.select1.selectedIndex].value)" >
<option value="140">140</option>
<option value="150">150</option>
</select>
<div id="showHint">Show rocars ccrn messages.</div>
</form>
</body>
</html>

response.jsp
复制代码 代码如下:

<%@ page language="java" contentType="text/plain; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="com.lwf.eus.util.*,java.util.*,com.lwf.eus.entity.*,com.lwf.eus.bean.*" %>
<html>
<head>
<title>response the ccrn</title>
</head>
<body>
<%
String q = request.getParameter("q");
System.out.println("message:" + q);
RocarsBean rocars = RocarsEntity.getRocarsListById(q);
%>
<table>
<tr>
<td>RocarsId</td>
<td>RocarsCcrn</td></tr>
<tr>
<td><%=rocars.getRocarsId() %></td>
<td><%=rocars.getCcrn() %></td>
</tr>
</table>
</body>
</html>

注意这里与自学练习一不同的是，request.jsp页面用一个div来显示信息，response.jsp从数据库里面查询出来的内容放在table标签里，其它的html标签不会在div里面显示。