运用Ajax通过select下拉框获得数据

大伙应该在开发中遇到过这种情况，就是通过下拉框选择要显示的内容。如下图所示：





在没用到ajax技术时，我们可以使用两种方法来解决，一种就是选择后再次获得下拉框的数据，和显示的数据一起反映在页面上，这是最笨的方法，因为你选择多少次，下拉框的数据就要从数据库重复读取多少次。另外一种方法就是将页面分两桢，上桢是下拉框，下桢就是要读取的内容。这样做比第一种方法进步了不少，但是分桢对页面控制又有了要求。

使用Ajax正好结合了上面两种方法的优点。

下面就来看看我们是怎样实现的，我的实现平台是Struts+Spring+Hibernate，但与Ajax交道的也就是Struts，至于你后台怎样从数据库取得数据，就要看你的具体实现了：

JSP页面：

<% @pagelanguage = " java " import = " java.util.*,com.wehave.oa.labourset.model.MBm " pageEncoding = " gb2312 " %>
<% @tagliburi = " struts-html " prefix = " html " %>
<% @tagliburi = " struts-bean " prefix = " bean " %>
<% @tagliburi = " struts-logic " prefix = " logic " %>
< html >
< head >
< title > 借阅信息 </ title >
< linkrel = " stylesheet " type = " text/css " href = " ../css/table.css " >
< linkhref = " ../css/style.css " rel = " stylesheet " type = " text/css " >
< scriptsrc = " ../css/Alai_tc.js " language = " JScript " ></ script >
<!-- html:javascriptformName = " lendingCartForm " method = " validate " /-->
< scriptLanguage = " JavaScript " >

functionbtn_AddFolder() {
if(confirm("确定要归还吗？")){
//if(document.lendingCartForm.onsubmit()){
document.forms[0].submit();
//}
}
}

varreq;
vardataDiv;
vardataTable;
vardataTableBody;
functionChange_Select()
{
dataTableBody=document.getElementById("lendingcartDataBody");
dataTable=document.getElementById("lendingcartData");
dataDiv=document.getElementById("popup");

varzhi=document.getElementById('tbEngineFilereadId').value;
varurl="returnBlueprintPage.go?method=getLendingCart&id="+zhi;

if(zhi=="0"){
alert("请选择您要察看的信息");
return;
}else{
if(window.XMLHttpRequest)
{
req=newXMLHttpRequest();
}elseif(window.ActiveXObject)
{
req=newActiveXObject("Microsoft.XMLHTTP");
}

if(req)
{
req.open("GET",url,true);
req.onreadystatechange=callback;
req.send(null);
}
}
}

functioncallback()
{
if(req.readyState==4)
{
if(req.status==200)
{
//alert(req.responseText);
document.getElementById("results").innerHTML=req.responseText;
}else{
alert("Notabletoretrievedescription"+req.statusText);
}
}
}

</ script >
</ head >
< body class = " bodycolor " topmargin = " 0 " leftmargin = " 0 " >
< html:formaction = " /updateLendingcarts " onsubmit = " returnvalidate(this) " >
< tablewidth = " 100% " background = " ../images/blank.gif " border = " 0 " cellspacing = " 0 " cellpadding = " 0 " >
< tr >< tdheight = " 7 " colspan = " 2 " ></ td ></ tr >
< tr >
< tdwidth = " 45% " height = " 23 " align = " left " >< strong >& nbsp; & nbsp; < imgsrc = " ../images/small/page_tools_bar.gif " width = " 13 " height = " 13 " >< span class = " css3STYLE20 " >& nbsp; & nbsp;借阅信息 </ span ></ strong ></ td >
< tdwidth = " 55% " align = " right " >
< imgname = " aa " src = " ../images/xin_gh.gif " width = " 51 " height = " 19 " alt = "" align = " absmiddle " onclick = ' btn_AddFolder() ' style = " cursor:hand " >& nbsp;
< imgname = " aa " src = " ../images/xin_gb.gif " width = " 51 " height = " 19 " alt = "" align = " absmiddle " style = " cursor:hand " onclick = ' javascript:window.close() ' >& nbsp;
</ td >
</ tr >
</ table >
< tablewidth = " 100% " border = " 1 " cellpadding = " 0 " cellspacing = " 0 " style = " border-collapse:collapse;border-top-width:0 " bordercolor = " #426EB4 " >
< tr >
< tdwidth = " 30% " class = " td1_a " >< span class = " STYLE1 " > 请选择借阅号 </ span ></ td >
< tdwidth = " 70% " >
< html:selectproperty = " tbEngineFilereadId " onchange = " Change_Select() " styleClass = " SmallSelect " >
< html:optionvalue = " 0 " > 请选择 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; </ html:option >
< html:optionscollection = " idlist " property = " tbEngineFilereadId " labelProperty = " tbEngineFilereadId " />
</ html:select >
</ td >
</ tr >
</ table >
< divid = " results " ></ div >
< INPUTTYPE = " hidden " name = " method " value = " doUpdateLendingcarts " >
</ html:form >

</ body >
</ html >

页面内容看上去很多，其实关键代码并不多：

首先我们的获得下拉框的数据，并在页面上反映出来：

< html:selectproperty = " tbEngineFilereadId " onchange = " Change_Select() " styleClass = " SmallSelect " >
< html:optionvalue = " 0 " > 请选择 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; </ html:option >
< html:optionscollection = " idlist " property = " tbEngineFilereadId " labelProperty = " tbEngineFilereadId " />
</ html:select >

当选择下拉框时，就会触动"Change_Select()"事件：

varreq;
vardataDiv;
vardataTable;
vardataTableBody;
functionChange_Select()
{
dataTableBody=document.getElementById("lendingcartDataBody");
dataTable=document.getElementById("lendingcartData");
dataDiv=document.getElementById("popup");

varzhi=document.getElementById('tbEngineFilereadId').value;
varurl="returnBlueprintPage.go?method=getLendingCart&id="+zhi;

if(zhi=="0"){
alert("请选择您要察看的信息");
return;
}else{
if(window.XMLHttpRequest)
{
req=newXMLHttpRequest();
}elseif(window.ActiveXObject)
{
req=newActiveXObject("Microsoft.XMLHTTP");
}

if(req)
{
req.open("GET",url,true);
req.onreadystatechange=callback;
req.send(null);
}
}
}

functioncallback()
{
if(req.readyState==4)
{
if(req.status==200)
{
//alert(req.responseText);
document.getElementById("results").innerHTML=req.responseText;
}else{
alert("Notabletoretrievedescription"+req.statusText);
}
}
}

这个js代码也不难，关键就在于"document.getElementById("results").innerHTML=req.responseText;"
我没有用JS来拼出页面，是考虑到页面的安全性问题，所以我采取了在后台拼出页面的做法。

最后看看action是怎样实现的：

/***/ /**
*根据借阅号获得借阅信息
*/
public ActionForwardgetLendingCart(
ActionMappingmapping,
ActionFormform,
HttpServletRequestreq,
HttpServletResponseres) {

StringreadID=(String)req.getParameter("id");

TbEngineFilereadtef=lendingCartsService.getLendingCartbyID(readID);

MYhbyhb=lendingCartsService.getBM(tef.getTbEngineFilereadJyr());
Stringjyrname=yhb.getMYhbXm();
Stringjyrbmid=yhb.getMBm().getMBmBmbh();
Stringjyrbmname=yhb.getMBm().getMBmMc();

MYhbyhb1=lendingCartsService.getBM(tef.getTbEngineFilereadDjr());
Stringdjrname=yhb1.getMYhbXm();
Stringdjrbmid=yhb1.getMBm().getMBmBmbh();
Stringdjrbmname=yhb1.getMBm().getMBmMc();

Stringdate=tef.getTbEngineFilereadGetTime().substring(0,11);

Stringredate="";
if(tef.getTbEngineFilereadEndTime()!=null){
redate=tef.getTbEngineFilereadEndTime().substring(0,11);
}

res.setContentType("text/xml;charset=GB2312");
res.setHeader("Cache-Control","no-cache");
Stringxml="";
xml+="<tablewidth='100%'border='1'cellpadding='0'cellspacing='0'style='border-collapse:collapse;border-top-width:0'bordercolor='#426EB4'>";
xml+="<tbody>";
xml+="<tr>";
xml+="<tdwidth='20%'class='td1_a'><spanclass='STYLE1'>档案分类ID</span></td>";
xml+="<tdwidth='30%'>"+"<inputtype='text'name='tbEngineFilereadSortId'class='smallInput'size='15'maxlength='15'value="+tef.getTbEngineFilereadSortId()+"readonly='true'>"+"</td>";
xml+="<tdwidth='20%'class='td1_a'><spanclass='STYLE1'>机械设备ID</span></td>";
xml+="<tdwidth='30%'>"+"<inputtype='text'name='tbEngineFilereadEgineId'class='smallInput'size='15'maxlength='15'value="+tef.getTbEngineFilereadEgineId()+"readonly='true'>"+"</td>";
xml+="</tr>";
xml+="<tr>";
xml+="<tdwidth='20%'class='td1_a'><spanclass='STYLE1'>蓝图ID</span></td>";
xml+="<tdwidth='30%'>"+"<inputtype='text'name='tbEngineFilereadBluePrintId'class='smallInput'size='15'maxlength='15'value="+tef.getTbEngineFilereadBluePrintId()+"readonly='true'>"+"</td>";
xml+="<tdwidth='20%'class='td1_a'><spanclass='STYLE1'>备注</span></td>";
xml+="<tdwidth='30%'>"+"<inputtype='text'name='tbEngineFilereadMemo'class='smallInput'size='15'maxlength='15'value="+tef.getTbEngineFilereadMemo()+">"+"</td>";
xml+="</tr>";
xml+="<tr>";
xml+="<tdwidth='20%'class='td1_a'><spanclass='STYLE1'>借阅时间</span></td>";
xml+="<tdwidth='30%'>"+"<inputtype='text'name='tbEngineFilereadGetTime'class='smallInput'size='15'maxlength='15'value="+date+"readonly='true'>"+"</td>";
xml+="<tdwidth='20%'class='td1_a'><spanclass='STYLE1'>归还时间</span></td>";
xml+="<tdwidth='30%'>";
xml+="<inputtype='text'name='tbEngineFilereadEndTime'class='smallInput'size='15'maxlength='15'value="+redate+">";
xml+="<imgsrc='../js/date/img.gif'id='f_trigger_c'style='cursor:pointer;border:1pxsolidred;'title='Dateselector'οnmοuseοver=/"this.style.background='red';/"οnmοuseοut=/"this.style.background=''/"/>";
xml+="<scripttype=/"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+="<tdwidth='20%'class='td1_a'><spanclass='STYLE1'>借阅人</span></td>";
xml+="<tdwidth='30%'>"+"<inputtype='hidden'name='tbEngineFilereadJyr'value="+tef.getTbEngineFilereadJyr()+">";
xml+="<inputtype='text'name='tbEngineFilereadJyrmc'class='smallInput'size='15'maxlength='15'value="+jyrname+"readonly='true'>"+"</td>";
xml+="<tdwidth='20%'class='td1_a'><spanclass='STYLE1'>借阅人部门</span></td>";
xml+="<tdwidth='30%'>"+"<inputtype='hidden'name='tbEngineFilereadJyrbm'value="+jyrbmid+">";
xml+="<inputtype='text'name='tbEngineFilereadJyrbmmc'class='smallInput'size='15'maxlength='15'value="+jyrbmname+"readonly='true'>"+"</td>";
xml+="</tr>";
xml+="<tr>";
xml+="<tdwidth='20%'class='td1_a'><spanclass='STYLE1'>登记人</span></td>";
xml+="<tdwidth='30%'>"+"<inputtype='hidden'name='tbEngineFilereadDjr'value="+tef.getTbEngineFilereadDjr()+">";
xml+="<inputtype='text'name='tbEngineFilereadDjrmc'class='smallInput'size='15'maxlength='15'value="+djrname+"readonly='true'>"+"</td>";
xml+="<tdwidth='20%'class='td1_a'><spanclass='STYLE1'>登记人部门</span></td>";
xml+="<tdwidth='30%'>"+"<inputtype='hidden'name='tbEngineFilereadDjrbm'value="+djrbmid+">";
xml+="<inputtype='text'name='tbEngineFilereadDjrbmmc'class='smallInput'size='15'maxlength='15'value="+djrbmname+"readonly='true'>"+"</td>";
xml+="</tr>";
xml+="</tbody>";
xml+="</table>";
try{
res.getWriter().write(xml);
}catch(IOExceptione){
//TODO自动生成catch块
e.printStackTrace();
}
returnnull;
}

这段代码虽然长，但不难。

至此，从下拉框选取内容的示例就完成了。