大伙應該在開發中遇到過這種情況，就是通過下拉框選擇要顯示的內容。如下圖所示：
在沒用到ajax技術時，我們可以使用兩種方法來解決，一種就是選擇后再次獲得下拉框的數據，和顯示的數據一起反映在頁面上，這是最笨的方法，因為你選擇多少次，下拉框的數據就要從數據庫重復讀取多少次。另外一種方法就是將頁面分兩楨，上楨是下拉框，下楨就是要讀取的內容。這樣做比第一種方法進步了不少，但是分楨對頁面控制又有了要求。
使用Ajax正好結合了上面兩種方法的優點。
下面就來看看我們是怎樣實現的，我的實現平臺是Struts+Spring+Hibernate，但與Ajax交道的也就是Struts，至于你后臺怎樣從數據庫取得數據，就要看你的具體實現了：
JSP頁面：
<%@?page?language="java"?import="java.util.*,com.wehave.oa.labourset.model.MBm"?pageEncoding="gb2312"%>
<%@?taglib?uri="struts-html"?prefix="html"?%>
<%@?taglib?uri="struts-bean"?prefix="bean"?%>
<%@?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"/-->
<script?Language="JavaScript">
function?btn_AddFolder()?
{
????if(confirm("確定要歸還嗎？")){
????????//if(document.lendingCartForm.onsubmit()){????????
????????????document.forms[0].submit();
????????//}
????}??
}
var?req;
var?dataDiv;
var?dataTable;
var?dataTableBody;
function?Change_Select()
{
????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;
????
????if(zhi=="0"){
????????alert("請選擇您要察看的信息");
?????????????????return;
????}else{
????????if(window.XMLHttpRequest)
????????{
????????????req=new?XMLHttpRequest();
????????}else?if(window.ActiveXObject)
????????{
????????????req=new?ActiveXObject("Microsoft.XMLHTTP");
????????}
????????
????????if(req)
????????{
????????????req.open("GET",url,true);
????????????req.onreadystatechange=callback;
????????????req.send(null);
????????}
????}
}
function?callback()
{
????if(req.readyState?==?4)
????{
????????if(req.status?==?200)
????????{
????????????//alert(req.responseText);
????????????document.getElementById("results").innerHTML=req.responseText;
????????}else{
????????????alert("Not?able?to?retrieve?description"+req.statusText);
????????}
????}
}
</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()
{
????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;
????
????if(zhi=="0"){
????????alert("請選擇您要察看的信息");
?????????????????return;
????}else{
????????if(window.XMLHttpRequest)
????????{
????????????req=new?XMLHttpRequest();
????????}else?if(window.ActiveXObject)
????????{
????????????req=new?ActiveXObject("Microsoft.XMLHTTP");
????????}
????????
????????if(req)
????????{
????????????req.open("GET",url,true);
????????????req.onreadystatechange=callback;
????????????req.send(null);
????????}
????}
}
function?callback()
{
????if(req.readyState?==?4)
????{
????????if(req.status?==?200)
????????{
????????????//alert(req.responseText);
????????????document.getElementById("results").innerHTML=req.responseText;
????????}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,
????????????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="";
????????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'?onmouseover=\"this.style.background='red';\"?onmouseout=\"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>";
????????try?{
????????????res.getWriter().write(xml);
????????}?catch?(IOException?e)?{
????????????//?TODO?自動生成?catch?塊
????????????e.printStackTrace();
????????}
????????return?null;
????} 這段代碼雖然長，但不難。
至此，從下拉框選取內容的示例就完成了。
posted on 2006-08-08 13:28
千山鳥飛絕 閱讀(10909)
評論(3) 編輯 收藏 所屬分類:
Ajax