利用了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 appendChild,innerHTML,join性能比较代码
Aug 29 Javascript
javascript showModalDialog模态对话框使用说明
Dec 31 Javascript
jQuery Ajax请求状态管理器打包
May 03 Javascript
Jquery.Form 异步提交表单的简单实例
Mar 03 Javascript
Extjs grid添加一个图片状态或者按钮的方法
Apr 03 Javascript
Javascript排序算法之计数排序的实例
Apr 05 Javascript
使用JavaScript开发IE浏览器本地插件实例
Feb 18 Javascript
jQuery简单获取键盘事件的方法
Jan 22 Javascript
基于jquery实现弹幕效果
Sep 29 Javascript
ES6 Map结构的应用实例分析
Jun 26 Javascript
js实现简单五子棋游戏
May 28 Javascript
Vue路由权限控制解析
Nov 09 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
基于PHP的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
strpos() 函数判断字符串中是否包含某字符串的方法
2019/01/16 PHP
juqery 学习之三 选择器 可见性 元素属性
2010/11/25 Javascript
js获取url中&quot;?&quot;后面的字串方法
2014/05/15 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
静态页面html中跳转传值的JS处理技巧
2016/06/22 Javascript
AngularJS ng-template寄宿方式用法分析
2016/11/07 Javascript
详解vue-router 路由元信息
2017/09/13 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
一步步教你用Python实现2048小游戏
2017/01/19 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
浅谈Python黑帽子取代netcat
2018/02/10 Python
python微信好友数据分析详解
2018/11/19 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
使用Windows批处理和WMI设置Python的环境变量方法
2019/08/14 Python
python 队列基本定义与使用方法【初始化、赋值、判断等】
2019/10/24 Python
python 6行代码制作月历生成器
2020/09/18 Python
Otticanet意大利:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
急诊科护士自我鉴定
2013/10/14 职场文书
出纳员岗位职责风险
2014/03/06 职场文书
医学生职业生涯规划书范文
2014/03/13 职场文书
《回乡偶书》教学反思
2014/04/12 职场文书
爱的承诺书
2015/01/20 职场文书
业务员岗位职责
2015/02/03 职场文书
锅炉工岗位职责
2015/02/13 职场文书
大学生求职简历自我评价
2015/03/02 职场文书
2015年世界艾滋病日活动总结
2015/03/24 职场文书
重温经典:乔布斯在斯坦福大学的毕业演讲(双语)
2019/08/26 职场文书
话题作文之自信作文
2019/11/15 职场文书
Nginx的基本概念和原理
2022/03/21 Servers