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

最新推荐文章于 2021-08-05 15:13:26 发布

最新推荐文章于 2021-08-05 15:13:26 发布 · 348 阅读

文章标签：

#数据库 #javascript #java #ViewUI

本文介绍如何利用Ajax技术优化网页中下拉框的数据加载过程，避免重复请求数据库，提高用户体验。通过Struts、Spring及Hibernate框架，实现下拉框选择后动态更新相关内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

在没用到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>

<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>

<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>

<bodyclass="bodycolor"topmargin="0"leftmargin="0">

<html:formaction="/updateLendingcarts"onsubmit="returnvalidate(this)">

<tablewidth="100%"background="../images/blank.gif"border="0"cellspacing="0"cellpadding="0">

<tr>

<tdwidth="45%"height="23"align="left"><strong>  <imgsrc="../images/small/page_tools_bar.gif"width="13"height="13"><spanclass="css3STYLE20">  借阅信息</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"> 

<imgname="aa"src="../images/xin_gb.gif"width="51"height="19"alt=""align="absmiddle"style="cursor:hand"onclick='javascript:window.close()'> 

</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"><spanclass="STYLE1">请选择借阅号</span></td>

<tdwidth="70%">

<html:selectproperty="tbEngineFilereadId"onchange="Change_Select()"styleClass="SmallSelect">

<html:optionvalue="0">请选择      </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">请选择      </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是怎样实现的：

/***//**

*根据借阅号获得借阅信息

publicActionForwardgetLendingCart(

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'onmouseover=/"this.style.background='red';/"onmouseout=/"this.style.background=''/"/>";

xml+="<scripttype=/"text/javascript/">";