大伙应该在开发中遇到过这种情况，就是通过下拉框选择要显示的内容。如下图所示：
在没用到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;
}
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1095317
分享到：
相关推荐
如下所示： <!DOCTYPE html> <html> <head> <title>排课设置<...content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">...link rel="stylesheet
ajax+ASP实现无限级Select下拉框联动，形成一个实用的多级菜单，读取Access数据库，本实例是一个6级的菜单，根据你的需要，你还可以进行扩展。它使用AJAX技术控制数据使用时才加载，提高程序效率，可以参考一下。
js+ajax 实现select下拉框无限级动态添加，代码简洁方便,哥想了很久才做出来的,欢迎使用
这就是"select下拉框添加搜索功能"这个知识点的核心所在。 在`select`下拉框中实现搜索功能，一般有两种常见方法：一种是原生HTML和JavaScript的实现，另一种是借助第三方库，如本例中的`jquery.editable-select`。...
通过以上步骤，我们就能够实现jQGrid中select下拉框的动态填充。这不仅提高了用户体验，还能使数据输入与后台数据保持一致，避免了因静态预设选项而产生的维护难题。在实际项目中，你需要根据具体需求调整代码，如...
动态加载select下拉框数据不仅适用于Web应用，也适用于移动应用。它有助于减少网络带宽消耗，加快页面响应速度，并允许用户更快地找到他们想要的选项，是现代Web开发中不可或缺的一个技巧。了解和掌握这项技术对于...
在“bootstrap select 下拉框通过拼音搜索汉字”这个实例中，我们关注的重点是如何利用该插件实现通过输入拼音来搜索并筛选汉字的功能，这对于中文环境下的用户体验提升有着显著的作用。 首先，我们要了解Bootstrap...
总结起来，实现“两个select下拉框中的数据相互移动”涉及到HTML、CSS和JavaScript的基本知识，以及对用户交互的响应和处理。实际开发中还需要根据具体需求进行调整和优化，确保用户体验的流畅和功能的完善。
在网页开发中，AJAX（Asynchronous JavaScript and XML）二级下拉框联动是一种常见的交互设计，用于提升用户体验，尤其在处理复杂表单或选择结构化数据时。这种技术允许用户在一个下拉框中做出选择后，根据所选值...
在级联下拉框中，当用户在一个下拉框中做出选择时，通过AJAX请求获取与该选择相关的下一级数据，然后更新下一个下拉框。 5. **服务器端接口**：为了响应前端的AJAX请求，后端需要提供一个接口，这个接口接收前端...
`jQuery select下拉框美化代码`这个压缩包的实现可能还包含了其他细节，如防止多次点击导致的闪烁，以及在鼠标移出下拉框时自动隐藏内容等功能。这种美化代码对于提升网站的用户体验和专业感具有积极意义，特别是...
这种效果可以通过Ajax实现，每级下拉框的选项改变时，都触发一个Ajax请求，获取并填充下一级别的选项。 三、实现步骤 1. 创建HTML结构：首先，我们需要创建包含多个select元素的HTML结构，每个select代表一个级别。...
4. **异步请求**：当一级下拉框的值改变时，通过`layui.ajax`或者使用axios等库向服务器发送一个请求，获取对应省份的城市列表。这个请求通常是一个GET请求，URL中带有省份ID作为查询参数。 5. **动态更新数据**：...
Bootstrap Select是一款基于Bootstrap框架的下拉框插件，它扩展了HTML `<select>`元素，提供了丰富的功能和定制选项，使得下拉菜单在视觉效果...通过熟练掌握并灵活运用Bootstrap Select，可以为您的项目增添更多亮点。
通过以上步骤，我们可以将原本单调的select下拉框转换为具有现代感和互动性的选择组件。这不仅可以提升网站的整体视觉效果，还能提高用户的操作体验，使他们更容易找到所需的信息。 在提供的压缩包文件“beautify ...
**Ajax无刷新下拉框联动**是Web开发中一种常见的交互设计，主要用于提高用户体验，让用户在选择某个选项后，无需等待页面整体刷新就能看到相关数据的更新。这种技术结合了Ajax（异步JavaScript和XML）与HTML下拉框...
6. **数据动态加载**：如果选项数据是从服务器动态获取的，可以使用Ajax请求加载数据，并在数据返回后动态构建`<option>`元素，再调用`selectpicker('refresh')`方法更新下拉框。 7. **无障碍访问（Accessibility）...
总结起来，Django forms提供了便捷的方式创建包含`select`下拉框的表单，通过`ModelChoiceField`从数据库中获取选项，然后在视图中处理用户提交的数据。在处理POST请求时，我们可以通过`form.cleaned_data`访问到...
AJAX-DWR下拉框级联是Web开发中一种常见的交互设计，主要用于提高用户体验，使得用户在选择某个选项时，相关联的下拉框能够自动更新其内容，以适应不同的场景需求。在这个实验中，我们将重点探讨如何使用AJAX和DWR...