AJAX自学练习 无刷新从数据库后台取数据显示
程序员文章站
2024-02-16 22:09:40
请求页面request.jsp 复制代码 代码如下:<%@ page language="java" contenttype="text/html; charset=...
请求页面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里面显示。
复制代码 代码如下:
<%@ 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里面显示。