Struts2 、Jquery 、ajax实现二级下拉框联动

   一般我们对于固定值联动的下拉框可能会直接把固定值放在数组中，在选择一级下拉框时触发onchange事件，对二级下拉框中赋值。然而在很多情况下我们需要在选择一级下拉框后从数据库动态取出值赋给二级下拉框，这时我们就需要借助ajax无页面刷新的优势来实现。
   首先我们来看jsp页面
 

<tr>
								<td>
									<font color="red">*</font>一级下拉框:
								</td>
								<td>
									<html:select property="systemkey"  onchange="changeValue()">
										<html:options collection="systemkeyMap" property="label"
											labelProperty="value" />
									</html:select>
								</td>
								</tr>
								
								<tr>
								<td>
									<font color="red">*</font>二级下拉框:
								</td>
								<td>
									<html:select property="reportkey" >
										<html:options collection="reportkeyMap" property="label"
											labelProperty="value" />
									</html:select>
								</td>
								</tr>

jsp页面我采用的是

<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>struts_html

标签，可以根据自己的情况采用各种标签，这里就以它作为例子onchange时调用changeValue()方法如下

var jq=jQuery.noConflict();
function changeValue(){
var selectValue=document.forms[0].systemkey.value;
 jq.ajax({
						type:"POST",
						url:"t09_report_analy_ajax.do",
						data:"systemkey="+selectValue,     // 传入的参数
						timeout: 10000,
                                               // dataType:"json",
						success:function(data){ 
						setValue(data);
						    
						  } 
						});

}

function setValue(data){
document.forms[0].reportkey.options.length=0;
var spl=data.split(",");
document.forms[0].reportkey.options[0]=new Option('请选择','请选择');
for(var i=1;i<spl.length;i++){
document.forms[0].reportkey.options[i]=new Option(spl[i-1],spl[i-1]);
}
}

   这里采用jquery封装的ajax来实现，当然要引入jquery-1.6.min.js文件以及要有jquery jar包的支持，struts.xml中配置文件

 <action path="/t09_report_analy/t09_report_analy_ajax"  parameter="analy_ajax" name="reportActionForm" 
 type="com.ist.poc.rpp.controller.Report_analyAction" validate="false" scope="request">
 </action>

   由于是jquery的初学者，第一次用jquery的ajax，所以在写的过程中会遇到很多的问题，这里我也将自己遇到的问题列出来，以便让初学jquery的童鞋们有所借鉴，
1）对于url这里的写法。我们可以看到对于struts.xml中

path="/t09_report_analy/t09_report_analy_ajax"

  所以一般我们在页面跳转时会写"/t09_report_analy/t09_report_analy_ajax.do" 但如果这样写的话是找不到对应得action的，必须将url写到最后的包它会直接定位到要跳转的action中。
2）被注掉的dataType:"json" 。这里的意思是返回的值类型为json类型，这是一个特殊的类型，如果写了这句就意味返回值的类型必须是json类型的，所以我们可以根据自己的情况改写这个类型或者这句话可以不写，所有的类型都可以直接返回。
3)在返回成功后可以得到返回的值data 调用setValue(data)可以将所得到的值放到二级下拉框中，这里就不多做解释了。
action中的代码：

public ActionForward t09_report_analy_ajax(ActionMapping mapping,ActionForm actionform,
			HttpServletRequest request,HttpServletResponse response)
	throws Exception{
		response.setContentType("text/html");
		response.setCharacterEncoding("GBK");
//根据参数从数据库得到二级菜单数据
	Report_analyDAO  report_analyDAO=(Report_analyDAO)context.getBean("report_analyDAO");
	     String systemkeyStr=request.getParameter("systemkey");	 //得到前台传来的参数 
		 ArrayList<Report> reportList=(ArrayList)Report_analyDAO.getReportKeyBySys(sqlMap, systemkeyStr);
		 String context="";
		 for(Report report:reportList){
			context+=report.getReportname()+",";
		 }
		PrintWriter out=response.getWriter();
		out.print(context);
		out.close();
		return null;
	}

在action中我们可以用response.getWriter.print()或者response.getWriter.write()将得到的结果返回。

评论

3 楼 ILoveDOUZHOU 2012-08-12  

很好哦，直接与数据库交互

2 楼 Chris_2012 2012-04-18  

1 楼 Damon_Zhang 2012-04-18