- 浏览: 713403 次
- 性别:
- 来自: 宇宙
文章分类
最新评论
-
天使建站:
http://www.aijquery.cn/Html/bia ...
选择控件:select ,radio,checkbox之用jquery获取选中值的小结 -
wahahachuang8:
GoEasy实时Web推送,支持后台推送和前台推送两种:后台推 ...
【反ajax】webSocket实现实时推送功能 -
white_crucifix:
Str5=Str1+Str2+Str3+Str4,这条语句执行 ...
面试系列(二):JVM工作原理 -
yanxing2012:
写的不对,http://blog.csdn.net/lian_ ...
List集合的复制方式小结 -
u012879379:
嗯,一针见血的指出了问题,谢谢博主
JedisDataException: ERR only (P)SUBSCRIBE / (P)UNSUBSCRIBE / QUIT allowed in thi
在开发web页面时,常常需要达到某一个文本输入框,更多的是下拉框随另一个下拉框的改变而改变值的"联动"效果。实现这种效果,往往需要我们跟后台进行交互。
这里,我将分别介绍如何使用ajax技术和dwr框架,实现下拉列表的联动效果。
需要实现级联效果的下拉列表:
现需要实现道具代码由业务的选择而改变的效果。
第一种:Ajax技术
(注:后台方法省略)
第二种:dwr框架方式
使用这种方式,首先必须要前期引入:
然后dwr.xml配置文件中,也必须对用到的实体类或暴露给js使用的工具类进行相应的配置。例如:
在BaiKuDwr工具类中,加上相应处理方法,例如:
然后JSP页面中的脚本文件:
注:后台方法略去……
dwr框架中结果的引用(如集合什么的)可直接用如#BaiKu.serviceList
的方式。
这里需要特别注意的就是dwr框架在js中的使用语法和他的便捷之处.
通过这两种方式,都能实现两个或多个下拉框(或者是文本框)的"级联"效果!
这里,我将分别介绍如何使用ajax技术和dwr框架,实现下拉列表的联动效果。
需要实现级联效果的下拉列表:
<TD nowrap="nowrap" width="15%" class="td_title">业务</TD> <TD width="35%" nowrap="nowrap"> <s:select id ="serviceId" name="baiKuServiceVO.serviceId" list="#BaiKu.serviceList" listKey="serviceId" listValue="serviceName" headerKey="0" headerValue="--请选择业务--" cssStyle="width:215px;" onchange="changeService();"></s:select> </TD>
<TD noWrap class="td_title">道具代码</TD> <TD> <select id ="consumeCode_select" name="baiKuConsumeCodeMatchVO.consumeCode" style="width:215px;"> <option value="">-请选择道具代码-</option> </select> </TD>
现需要实现道具代码由业务的选择而改变的效果。
第一种:Ajax技术
function changeService() { var serviceId = document.all.serviceId.value var channelId = document.all.channelId.value if (serviceId == "" || serviceId == 0) { alert("请选择业务!"); document.all.serviceId.focus(); return false; } createXMLHttpRequest(); if(serviceId != "" && serviceId != 0 && channelId != "" || channelId != 0) { //业务关联道具 var url="xxx!consumeCodeByServiceIdList.action?serviceId="+serviceId; xmlHttp.open("post",url,true); xmlHttp.onreadystatechange = callback; xmlHttp.send(null); } } } function callback() { var consumeCode = document.getElementById("consumeCode"); for(var i=consumeCode.options.length;i>=1;i--) { consumeCode.options.remove(i) } if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { result = xmlHttp.responseTEXT;//服务器返回值,假设返回值为1 var arr=trim(result).split(","); for(var i=0;i<arr.length-1;i++) { var arr1 = arr[i].split(":"); if(arr1 == undefined) continue; document.getElementById("consumeCode_select").options[1] = new Option(arr1[2],arr1[1]); var txt = arr1[1]; var value = arr1[0]; var opt=new Option(arr1[1],arr1[0]); document.getElementById("consumeCode_select").options[i+1]=opt; } } } }
(注:后台方法省略)
第二种:dwr框架方式
使用这种方式,首先必须要前期引入:
<script type='text/javascript' src='<%=request.getContextPath()%>/dwr/engine.js'> </script> <script type='text/javascript' src='<%=request.getContextPath()%>/dwr/util.js'> </script> <script type='text/javascript' src='<%=request.getContextPath()%>/dwr/interface/BaiKuDwr.js'> </script>
然后dwr.xml配置文件中,也必须对用到的实体类或暴露给js使用的工具类进行相应的配置。例如:
<create creator="new" javascript="BaiKuDwr"> <param name="class" value="com.xx.xx.xxx.xx"/> </create> <convert match="com.xx.hz.xx.BaiKuConsumeCodeVO" converter="bean"> </convert>
在BaiKuDwr工具类中,加上相应处理方法,例如:
public List<BaiKuConsumeCodeMatchVO> getConsumeCodeByService(String serviceId) { //处理过程略…… return null; }
然后JSP页面中的脚本文件:
function changeService() { var serviceId = document.getElementById("serviceId").value; var consumeCode = document.getElementById("consumeCode_select"); //alert(serviceId); removeOptions(consumeCode); consumeCode.options[0] = new Option("-请选择道具代码-",""); if(cpId==0){ alert("请选择合作方"); } if(serviceId!=0 && cpId!=0) { //道具代码级联 BaiKuDwr.getConsumeCodeByService(serviceId,cpId,function (resp){ for (var i=0;i<resp.length;i++){ var bean=resp[i]; consumeCode.options[i+1] = new Option(bean.consumeName,bean.consumeCode); } }); //清空列表 function removeOptions(form){ if(form.options.length>0){ for(var i=(form.options.length-1);i>=0;i--){ var o=form.options[i]; form.options[i] = null; } } }
注:后台方法略去……
dwr框架中结果的引用(如集合什么的)可直接用如#BaiKu.serviceList
的方式。
这里需要特别注意的就是dwr框架在js中的使用语法和他的便捷之处.
通过这两种方式,都能实现两个或多个下拉框(或者是文本框)的"级联"效果!
发表评论
-
关于IDEA的debug阻塞模式的一个坑
2018-05-03 17:28 7067-----------------------201805 ... -
多线程:如何确定所有任务都执行完成了?
2018-04-02 15:30 3466--------------------20180502更 ... -
多线程写同一个excel文件(导出)
2018-03-22 15:14 14189今天是2018.03.22,已经 ... -
进一步理解get和set
2016-11-17 17:23 1090做CRUD的功能时,我们常常会定义一个和表对应的实体类信息 ... -
使用Hessian来进行远程调用
2016-11-03 09:39 791Hessian是一个轻量级的remoting onhttp工 ... -
测试redis+keepalived实现简单的主备切换
2016-07-17 18:23 6195keepalived是一个是集群管理中保证集群高可用的一个 ... -
关于log4j错误日志的保存
2016-05-06 18:33 1829因为最近着手了项目里面日志的规范化工作,之前开发的时候都是 ... -
解决一个web的项目定时任务入库“卡住”问题
2016-05-04 15:16 2355事情的起因是因为我 ... -
No qualifying bean of type is defined: expected single matching bean but found 2
2016-03-28 18:59 2235最近在Spring的注解中,尝试获取一个Bean出现了如题 ... -
一种解决在Linux环境下发送短信中文乱码问题的方案
2016-03-10 19:15 2143这几天在折腾短信的 ... -
【反ajax】webSocket实现实时推送功能
2016-01-21 18:28 8956额。前天就说有时间要研究下webSocket这种实时推技术 ... -
运用Comet技术实现服务端往客户端主动推送数据(结合redis发布/订阅)
2016-01-18 21:07 1记得我之前写过 redis主动向页面push数据 的文章 ... -
运用Comet技术实现服务端往客户端主动推送数据(结合redis发布/订阅)
2016-01-18 21:00 3035记得我之前写过 redis主动向页面push数据 的文 ... -
将Java Project (非web项目)打成Jar包并实现相关功能
2015-11-25 17:21 4898【若要转载,请标明出处,谢谢~~】 http://rai ... -
webService的初步认识和简单用例
2015-10-19 18:19 2607一、什么是webService? Web Service ... -
object和byte[]数组相互转换
2015-09-25 14:15 0package com.kayak.util.object; ... -
单例模式在高并发情形下造成的访问覆盖问题
2015-09-25 11:29 5952好吧,最近我特么是跟高并发杠上了。。 单例模式想必很很常见 ... -
oscache之刷新缓存flushEntry的使用
2015-09-19 15:12 2149========================== 困 ... -
多线程 & 异步调用 的理解
2015-09-17 11:52 9171最近做项目,高并发的情况比较常见,因此常常需要用到多线程。 ... -
ServeltContext的理解和一种使用场景
2015-09-17 11:12 2119最近做项目,用到了一个比较不熟悉的东西,但我自己又觉得很有 ...
相关推荐
这是一个级联菜单,使用ajax技术,采用了dwr框架,选择省份,城市自动加载,以此类推,可以实现多种级联效果
dwr实现的完整的二级下拉联动列表,里面有说明,源代码。
这个demo演示了使用DWR框架配合数据库来做的下拉列表级联。dao层采用了jsp中经典的JDBC封装、单例、属性文件等技术。数据文件可以按照我的entity层里面写的代码创建就可以了。这个文件直接导入你的工程在属性文件中...
Ajax的dwr框架实现级联源码,大家有用到的可以看一下
DWR+hibernate+spring级联下拉列表框 DWR+hibernate+spring级联下拉列表框
介绍ajax技术和dwr框架,从ajax的requesthttp对象到dwr框架方法,学习就可用,是java应用方面
基于Ajax技术的DWR框架的研究与应用
AJAX-DWR下拉框级联AJAX-DWR下拉框级联 真正实用的`仅供参考
Ajax的简述 传统web开发模式与ajax开发模式的不同 Ajax的开发与案例 Dwr框架的简介 Dwr框架的应用与案例 Dwr 框架与Struts,Spring框架的结合
包含Ajax高级程序设计和DWR框架的资料
用dwr实现页面中select列表的动态级联,
dwr实现2级级联菜单dwr实现2级级联菜单dwr实现2级级联菜单dwr实现2级级联菜单dwr实现2级级联菜单dwr实现2级级联菜单dwr实现2级级联菜单dwr实现2级级联菜单dwr实现2级级联菜单
DWR框架的实现DWR框架的实现DWR框架的实现DWR框架的实现DWR框架的实现
dwr 框架dwr 框架dwr 框架dwr 框架dwr 框架dwr 框架
SSH框架Ajax(运用dwr框架)综合小实例SSH框架Ajax(运用dwr框架)综合小实例SSH框架Ajax(运用dwr框架)综合小实例
一个简单的案例,用DWR框架简化AJAX开发。
DWR框架结合ajax技术 和j2ee struts 的标签,仍然是web开发的主心骨。
NULL 博文链接:https://finally-m.iteye.com/blog/362477
AJAX框架DWR简单应用
AJAX_DWR框架AJAX_DWR框架