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

JSP
在Jsp Servlet中页面重新定向总汇
JSP 点击链接后下载文件(相当于右键另存)功能
Java 通过设置Referer反盗链
JSP XMLHttpRequest动态无刷新及其中文乱码处理
java session出现的错误
JSP 自定义标签之一 简单实例
JSP Servelet 数据源连接池的配置
jsp web.xml文件的作用及基本配置
java tapestry5 布局 参数的处理
JSP 传递中文参数的例子
通过Setters方式对日期属性及日期格式进行IOC注入
J2EE基础－－为什么jsp不能取代servlet?
解析JSP中标签库
JSP三种页面跳转方式的比较
提升JSP应用程序的几个技巧
JSP进行数据库连接的实例
JSP实例程序：统计当前在线人数
EJB初学者怎样面对经常有的十一个疑惑
高手为你解读J2EE开发过程中的异常处理
JSP环境配置：TOMCAT的内存和连接数配置详解

No. « 34 35 36 37 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-11   浏览: 300 ::
收藏到网摘: 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里面显示。