一般我们对于固定值联动的下拉框可能会直接把固定值放在数组中,在选择一级下拉框时触发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()将得到的结果返回。
分享到:
相关推荐
ajax 二级下拉框ajax 实现二级下拉框,地址联动,xmlHttp,serverlet,java,ajax 实现二级下拉框,地址联动,xmlHttp,serverlet,java,
AJAX二级下拉框联动 - justshare - JavaEye技术网站
实现JQuery年月日三级下拉框联动,因为项目需要,这里代码进行了改良版,供大家参考。
一个直制的JQuery 年月日三级下拉框联动 使用方法非常简单 <title>JQuery 年月日三下拉框联动 <script src="jquery-1.4.2.min.js" type="text/javascript"> ...
ajax实现二级下拉框和用户名校验eclipse下的工程文件(原码)
jquery插件城市二级联动 使用简单 数据是以微信地区数据为例
JQuery+年月日三级下拉框联动..有闰年之风,大小月...初学者很欢迎的
Ajax实现二级/三级联动下拉框---servlet版
用struts2 doubleselect标签实现的二级联动下拉菜单
Ajax实现下拉框三级联动,实现数据库动态连接,无刷新动态更新 MyEclipse+Ajax+SQL Server 2005
实现jsp页面二级下拉框联动,实时读取数据库数据实现jsp页面二级下拉框联动,实时读取数据库数据
jquery 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框jquery 三级联动下拉框
jquery实现的多级联动下拉框,由div标签加上span标签实现。
在一个jsp页面实现二级下拉框联动,实时读取数据库数据.pdf
Smarty + Ajax 下拉菜单二级联动: 1. 建立数据库ajaxtest (使用utf8) 2. 进行conn.php 修改root密码 3. 导入表 product.sql --- 主产品 4. 导入表 producttest.sql -- 二级产品 弄好后运行:...
jquery三级下拉框联动,本例子是拿城市做的级联,如果项目izhong有需要,可以自己修改
2级下拉框联动含数据库,很经典,和适合初学者学习。
1、Jsp页面 ... //为了避免jquery中的'$'与其它的'$'冲突,在此将jquery中的'$'重命名为'jQuery' var jQuery=$; //初始化数据 jQuery(document).ready(function(){ getProvince(); });