利用了jquery的ajax实现二级联互动菜单


Posted in Javascript onDecember 02, 2013

菜单资源保存在数据库中。利用了jquery的ajax实现。用到的包有:json-lib-2.2.3-jdk15.jar ezmorph-1.0.6.jar json.js jquery.js

jsp页面的代码:

<%@ page contentType="text/html; charset=gbk"%> 
<%@ taglib prefix="s" uri="/struts-tags"%> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/json.js"></script> 
<% String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/"; 
out.println(basePath); 
%> <script type="text/javascript"> 
jQuery(function($){ 
//alert("ok"); 
}); 
function onchangeShow(oneId){ 
$.ajax({ 
url : "<%=basePath%>cateJson.whbs", 
data : {parentId : oneId}, // 参数 
type : "post", 
cache : false, 
dataType : "json", //返回json数据 
error: function(){ 
alert('error'); 
}, 
success:onchangecallback 
}); 
} 
function onchangecallback(data){ 
document.all['twoId'].options.length = 0; //清空原有的option 
var str=""; 
for(var i=0;i<data.length;i++){ 
str+="<option value='"+data[i].recordId+"'>"+data[i].title+"</option>" 
} 
$("#twoId").html(str); 
} 
</script> 
<html> 
<body> 
<div align="center"> 
请选择部门类型 
<s:select list="rfones" listKey="recordId" listValue="title" name="oneId" theme="simple" id="oneId" value="oneID" onchange="onchangeShow(this.value)"></s:select> 
请选择文件类型 
<s:select list="rftwos" listKey="recordId" listValue="title" name="twoId" theme="simple" id="twoId" value="twoID"></s:select> 
</div> 
</body> 
</html>

struts中action的代码
/** 
* des:取得二级联动菜单 
* autho:exceljava 
* date:Nov 20, 2009 
* @return 
* @throws IOException 
*/ 
public String getJsonCategory() throws IOException{ 
rfjsons=archiveService.getCategoryByParentID(parentId);//这里从数据库取得数据 
net.sf.json.JSONArray jsonObj=net.sf.json.JSONArray.fromObject(rfjsons);//组装成json数据 
sendMessage(jsonObj.toString());//向视图push json数据 
return null; 
} 
/** 
* des:封装发送json格式的数据回js 
* autho:exceljava 
* date:Nov 20, 2009 
* @param content 
* @throws IOException 
*/ 
public void sendMessage(String content) throws IOException{ 
HttpServletResponse response = ServletActionContext.getResponse(); 
response.setCharacterEncoding("UTF-8"); 
response.getWriter().write(content); }
Javascript 相关文章推荐
用javascript获得地址栏参数的两种方法
Nov 08 Javascript
javascript 对表格的行和列都能加亮显示
Dec 26 Javascript
Javascript Object.extend
May 18 Javascript
jquery里的each使用方法详解
Dec 22 Javascript
jquery实现的网页自动播放声音
Apr 30 Javascript
Node.js实现数据推送
Apr 14 Javascript
移动端 一个简单易懂的弹出框
Jul 06 Javascript
原生js实现鼠标跟随效果
Feb 28 Javascript
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
vue实现商城购物车功能
Nov 27 Javascript
使用 vue.js 构建大型单页应用
Feb 10 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
Feb 10 Javascript
前台js调用后台方法示例
Dec 02 #Javascript
用javascript为页面添加天气显示实现思路及代码
Dec 02 #Javascript
给ListBox添加双击事件示例代码
Dec 02 #Javascript
js抽奖实现随机抽奖代码效果
Dec 02 #Javascript
javascript模拟地球旋转效果代码实例
Dec 02 #Javascript
js实现全屏漂浮广告移入光标停止移动
Dec 02 #Javascript
扩展JS Date对象时间格式化功能的小例子
Dec 02 #Javascript
You might like
浅析is_writable的php实现
2013/06/18 PHP
php中的strpos使用示例
2014/02/27 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
jquery弹出框的用法示例(一)
2013/08/26 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
2013/08/26 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
九种原生js动画效果
2015/11/11 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
jQuery图片渐变特效的简单实现
2016/06/25 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
各种选择框jQuery的选中方法(实例讲解)
2017/06/27 jQuery
微信小程序使用request网络请求操作实例
2017/12/15 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
p5.js临摹旋转爱心
2019/10/23 Javascript
微信小程序request请求封装,验签代码实例
2019/12/04 Javascript
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
numpy.random.seed()的使用实例解析
2018/02/03 Python
Python 将pdf转成图片的方法
2018/04/23 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
django最快程序开发流程详解
2019/07/19 Python
Python any()函数的使用方法
2019/10/28 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
Python用access判断文件是否被占用的实例方法
2020/12/17 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
基于css3的属性transition制作菜单导航效果
2015/09/01 HTML / CSS
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
Charles&Keith美国官方网站:新加坡快时尚鞋类和配饰零售商
2019/11/27 全球购物
自考自我鉴定范文
2013/10/30 职场文书
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
媒矿安全生产承诺书
2014/05/23 职场文书
个人租房协议书(范本)
2014/10/14 职场文书
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
2021/04/03 Javascript