大伙应该在开发中遇到过这种情况,就是通过下拉框选择要显示的内容。如下图所示:
![](https://p-blog.csdn.net/images/p_blog_csdn_net/rickhunterchen/select2.jpg)
在没用到ajax技术时,我们可以使用两种方法来解决,一种就是选择后再次获得下拉框的数据,和显示的数据一起反映在页面上,这是最笨的方法,因为你选择多少次,下拉框的数据就要从数据库重复读取多少次。另外一种方法就是将页面分两桢,上桢是下拉框,下桢就是要读取的内容。这样做比第一种方法进步了不少,但是分桢对页面控制又有了要求。
使用Ajax正好结合了上面两种方法的优点。
下面就来看看我们是怎样实现的,我的实现平台是Struts+Spring+Hibernate,但与Ajax交道的也就是Struts,至于你后台怎样从数据库取得数据,就要看你的具体实现了:
JSP页面:
<%
...
@ page language="java" import="java.util.*,com.wehave.oa.labourset.model.MBm" pageEncoding="gb2312"
%>
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
<%
...
@ taglib uri="struts-html" prefix="html"
%>
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
<%
...
@ taglib uri="struts-bean" prefix="bean"
%>
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
<%
...
@ taglib uri="struts-logic" prefix="logic"
%>
<
html
>
<
head
>
<
title
>
借阅信息
</
title
>
<
link
rel
="stylesheet"
type
="text/css"
href
="../css/table.css"
>
<
link
href
="../css/style.css"
rel
="stylesheet"
type
="text/css"
>
<
script
src
="../css/Alai_tc.js"
language
="JScript"
></
script
>
<!--
html:javascript formName="lendingCartForm" method="validate"/
-->
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
<
script
Language
="JavaScript"
>
...
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
function btn_AddFolder() ...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(confirm("确定要归还吗?"))...{
//if(document.lendingCartForm.onsubmit()){
document.forms[0].submit();
//}
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
var req;
var dataDiv;
var dataTable;
var dataTableBody;
function Change_Select()
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
dataTableBody=document.getElementById("lendingcartDataBody");
dataTable=document.getElementById("lendingcartData");
dataDiv=document.getElementById("popup");
var zhi=document.getElementById('tbEngineFilereadId').value;
var url="returnBlueprintPage.go?method=getLendingCart&id="+zhi;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(zhi=="0")...{
alert("请选择您要察看的信息");
return;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
}else...{
if(window.XMLHttpRequest)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
req=new XMLHttpRequest();
}else if(window.ActiveXObject)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
req=new ActiveXObject("Microsoft.XMLHTTP");
}
if(req)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
req.open("GET",url,true);
req.onreadystatechange=callback;
req.send(null);
}
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
function callback()
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if(req.readyState == 4)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if(req.status == 200)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
//alert(req.responseText);
document.getElementById("results").innerHTML=req.responseText;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
}else...{
alert("Not able to retrieve description"+req.statusText);
}
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/0196c3df5ea9e936f21e9932cca91014.gif)
</
script
>
</
head
>
<
body
class
="bodycolor"
topmargin
="0"
leftmargin
="0"
>
<
html:form
action
="/updateLendingcarts"
onsubmit
="return validate(this)"
>
<
table
width
="100%"
background
="../images/blank.gif"
border
="0"
cellspacing
="0"
cellpadding
="0"
>
<
tr
><
td
height
="7"
colspan
="2"
></
td
></
tr
>
<
tr
>
<
td
width
="45%"
height
="23"
align
="left"
><
strong
>
<
img
src
="../images/small/page_tools_bar.gif"
width
="13"
height
="13"
><
span
class
="css3 STYLE20"
>
借阅信息
</
span
></
strong
></
td
>
<
td
width
="55%"
align
="right"
>
<
img
name
="aa"
src
="../images/xin_gh.gif"
width
="51"
height
="19"
alt
=""
align
="absmiddle"
onclick
='btn_AddFolder()'
style
="cursor:hand"
>
<
img
name
="aa"
src
="../images/xin_gb.gif"
width
="51"
height
="19"
alt
=""
align
="absmiddle"
style
="cursor:hand"
onclick
='javascript:window.close()'
>
</
td
>
</
tr
>
</
table
>
<
table
width
="100%"
border
="1"
cellpadding
="0"
cellspacing
="0"
style
="border-collapse: collapse; border-top-width: 0"
bordercolor
="#426EB4"
>
<
tr
>
<
td
width
="30%"
class
="td1_a"
><
span
class
="STYLE1"
>
请选择借阅号
</
span
></
td
>
<
td
width
="70%"
>
<
html:select
property
="tbEngineFilereadId"
onchange
="Change_Select()"
styleClass
="SmallSelect"
>
<
html:option
value
="0"
>
请选择
</
html:option
>
<
html:options
collection
="idlist"
property
="tbEngineFilereadId"
labelProperty
="tbEngineFilereadId"
/>
</
html:select
>
</
td
>
</
tr
>
</
table
>
<
div
id
="results"
></
div
>
<
INPUT
TYPE
="hidden"
name
="method"
value
="doUpdateLendingcarts"
>
</
html:form
>
</
body
>
</
html
>
页面内容看上去很多,其实关键代码并不多:
首先我们的获得下拉框的数据,并在页面上反映出来:
<
html:select
property
="tbEngineFilereadId"
onchange
="Change_Select()"
styleClass
="SmallSelect"
>
<
html:option
value
="0"
>
请选择
</
html:option
>
<
html:options
collection
="idlist"
property
="tbEngineFilereadId"
labelProperty
="tbEngineFilereadId"
/>
</
html:select
>
当选择下拉框时,就会触动"Change_Select()"事件:
var
req;
var
dataDiv;
var
dataTable;
var
dataTableBody;
function
Change_Select()
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
dataTableBody=document.getElementById("lendingcartDataBody");
dataTable=document.getElementById("lendingcartData");
dataDiv=document.getElementById("popup");
var zhi=document.getElementById('tbEngineFilereadId').value;
var url="returnBlueprintPage.go?method=getLendingCart&id="+zhi;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(zhi=="0")...{
alert("请选择您要察看的信息");
return;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
}else...{
if(window.XMLHttpRequest)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
req=new XMLHttpRequest();
}else if(window.ActiveXObject)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
req=new ActiveXObject("Microsoft.XMLHTTP");
}
if(req)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
req.open("GET",url,true);
req.onreadystatechange=callback;
req.send(null);
}
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
function
callback()
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
if(req.readyState == 4)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if(req.status == 200)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
//alert(req.responseText);
document.getElementById("results").innerHTML=req.responseText;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
}else...{
alert("Not able to retrieve description"+req.statusText);
}
}
}
这个js代码也不难,关键就在于"document.getElementById("results").innerHTML=req.responseText;"
我没有用JS来拼出页面,是考虑到页面的安全性问题,所以我采取了在后台拼出页面的做法。
最后看看action是怎样实现的:
/** */
/**
* 根据借阅号获得借阅信息
*/
public
ActionForward getLendingCart(
ActionMapping mapping,
ActionForm form,
HttpServletRequest req,
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
HttpServletResponse res)
...
{
String readID=(String)req.getParameter("id");
TbEngineFileread tef=lendingCartsService.getLendingCartbyID(readID);
MYhb yhb=lendingCartsService.getBM(tef.getTbEngineFilereadJyr());
String jyrname=yhb.getMYhbXm();
String jyrbmid=yhb.getMBm().getMBmBmbh();
String jyrbmname=yhb.getMBm().getMBmMc();
MYhb yhb1=lendingCartsService.getBM(tef.getTbEngineFilereadDjr());
String djrname=yhb1.getMYhbXm();
String djrbmid=yhb1.getMBm().getMBmBmbh();
String djrbmname=yhb1.getMBm().getMBmMc();
String date=tef.getTbEngineFilereadGetTime().substring(0,11);
String redate="";
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(tef.getTbEngineFilereadEndTime()!=null)...{
redate=tef.getTbEngineFilereadEndTime().substring(0,11);
}
res.setContentType("text/xml;charset=GB2312");
res.setHeader("Cache-Control","no-cache");
String xml="";
xml+="<table width='100%' border='1' cellpadding='0' cellspacing='0' style='border-collapse: collapse; border-top-width: 0' bordercolor='#426EB4'>";
xml+="<tbody>";
xml+="<tr>";
xml+="<td width='20%' class='td1_a'><span class='STYLE1'>档案分类ID</span></td>";
xml+="<td width='30%'>"+"<input type='text' name='tbEngineFilereadSortId' class='smallInput' size='15' maxlength='15' value="+tef.getTbEngineFilereadSortId()+" readonly='true'>"+"</td>";
xml+="<td width='20%' class='td1_a'><span class='STYLE1'>机械设备ID</span></td>";
xml+="<td width='30%'>"+"<input type='text' name='tbEngineFilereadEgineId' class='smallInput' size='15' maxlength='15' value="+tef.getTbEngineFilereadEgineId()+" readonly='true'>"+"</td>";
xml+="</tr>";
xml+="<tr>";
xml+="<td width='20%' class='td1_a'><span class='STYLE1'>蓝图ID</span></td>";
xml+="<td width='30%'>"+"<input type='text' name='tbEngineFilereadBluePrintId' class='smallInput' size='15' maxlength='15' value="+tef.getTbEngineFilereadBluePrintId()+" readonly='true'>"+"</td>";
xml+="<td width='20%' class='td1_a'><span class='STYLE1'>备注</span></td>";
xml+="<td width='30%'>"+"<input type='text' name='tbEngineFilereadMemo' class='smallInput' size='15' maxlength='15' value="+tef.getTbEngineFilereadMemo()+" >"+"</td>";
xml+="</tr>";
xml+="<tr>";
xml+="<td width='20%' class='td1_a'><span class='STYLE1'>借阅时间</span></td>";
xml+="<td width='30%'>"+"<input type='text' name='tbEngineFilereadGetTime' class='smallInput' size='15' maxlength='15' value="+date+" readonly='true'>"+"</td>";
xml+="<td width='20%' class='td1_a'><span class='STYLE1'>归还时间</span></td>";
xml+="<td width='30%'>";
xml+="<input type='text' name='tbEngineFilereadEndTime' class='smallInput' size='15' maxlength='15' value="+redate+">";
xml+="<img src='../js/date/img.gif' id='f_trigger_c' style='cursor: pointer; border: 1px solid red;' title='Date selector' οnmοuseοver="this.style.background='red';" οnmοuseοut="this.style.background=''" />";
xml+="<script type="text/javascript"> ";
xml+="Calendar.setup({ inputField : "tbEngineFilereadEndTime", ifFormat : "%Y-%m-%d", button : "f_trigger_c", align : "Tl", singleClick : "true" });";
xml+="</"+"script>";
xml+="</td>";
xml+="</tr>";
xml+="<tr>";
xml+="<td width='20%' class='td1_a'><span class='STYLE1'>借阅人</span></td>";
xml+="<td width='30%'>"+"<input type='hidden' name='tbEngineFilereadJyr' value="+tef.getTbEngineFilereadJyr()+" >";
xml+="<input type='text' name='tbEngineFilereadJyrmc' class='smallInput' size='15' maxlength='15' value="+jyrname+" readonly='true'>"+"</td>";
xml+="<td width='20%' class='td1_a'><span class='STYLE1'>借阅人部门</span></td>";
xml+="<td width='30%'>"+"<input type='hidden' name='tbEngineFilereadJyrbm' value="+jyrbmid+" >";
xml+="<input type='text' name='tbEngineFilereadJyrbmmc' class='smallInput' size='15' maxlength='15' value="+jyrbmname+" readonly='true'>"+"</td>";
xml+="</tr>";
xml+="<tr>";
xml+="<td width='20%' class='td1_a'><span class='STYLE1'>登记人</span></td>";
xml+="<td width='30%'>"+"<input type='hidden' name='tbEngineFilereadDjr' value="+tef.getTbEngineFilereadDjr()+" >";
xml+="<input type='text' name='tbEngineFilereadDjrmc' class='smallInput' size='15' maxlength='15' value="+djrname+" readonly='true'>"+"</td>";
xml+="<td width='20%' class='td1_a'><span class='STYLE1'>登记人部门</span></td>";
xml+="<td width='30%'>"+"<input type='hidden' name='tbEngineFilereadDjrbm' value="+djrbmid+" >";
xml+="<input type='text' name='tbEngineFilereadDjrbmmc' class='smallInput' size='15' maxlength='15' value="+djrbmname+" readonly='true'>"+"</td>";
xml+="</tr>";
xml+="</tbody>";
xml+="</table>";
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
try ...{
res.getWriter().write(xml);
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
} catch (IOException e) ...{
// TODO 自动生成 catch 块
e.printStackTrace();
}
return null;
}
这段代码虽然长,但不难。
至此,从下拉框选取内容的示例就完成了。