利用了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 相关文章推荐
新浪的图片新闻效果
Jan 13 Javascript
网易JS面试题与Javascript词法作用域说明
Nov 09 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
Nov 06 Javascript
javascript基本类型详解
Nov 28 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
jQuery点击输入框显示验证码图片
May 19 Javascript
JS实现移动端判断上拉和下滑功能
Aug 07 Javascript
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 Javascript
原生JS实现Ajax跨域请求flask响应内容
Oct 24 Javascript
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 Javascript
简单了解小程序+node梳理登陆流程
Jun 24 Javascript
vue实现百度语音合成的实例讲解
Oct 14 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
IIS下PHP的三种配置方式对比
2014/11/20 PHP
Zend Framework路由器用法实例详解
2016/12/11 PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
2019/03/01 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
2016/05/31 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
jQuery实现所有验证通过方可提交的表单验证
2017/11/21 jQuery
微信小程序实现折叠展开效果
2018/07/19 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
详解Python中with语句的用法
2015/04/15 Python
Python使用matplotlib实现在坐标系中画一个矩形的方法
2015/05/20 Python
Python基于回溯法子集树模板解决m着色问题示例
2017/09/07 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
Python 获取 datax 执行结果保存到数据库的方法
2019/07/11 Python
浅谈Django QuerySet对象(模型.objects)的常用方法
2020/03/28 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
Python os库常用操作代码汇总
2020/11/03 Python
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
Tripadvisor新西兰:阅读评论,比较价格和酒店预订
2018/02/10 全球购物
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
保险专业大专生求职信
2013/10/26 职场文书
机关干部三严三实心得体会
2014/10/13 职场文书
买房协议书范本
2014/10/23 职场文书
师德师风个人整改措施
2014/10/27 职场文书
2014年学生会生活部工作总结
2014/11/07 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
从严治党主题教育活动总结
2015/05/07 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书
52条SQL语句教你性能优化
2021/05/25 MySQL
Golang解析JSON对象
2022/04/30 Golang