利用了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表单验证 - Parsley.js使用和配置
Jan 25 Javascript
浅析js中2个等号与3个等号的区别
Aug 06 Javascript
js综合应用实例简单的表格统计
Sep 03 Javascript
JQuery的ready函数与JS的onload的区别详解
Nov 21 Javascript
让JavaScript和其它资源并发下载的方法
Oct 16 Javascript
简单总结JavaScript中的String字符串类型
May 26 Javascript
JS基于面向对象实现的拖拽功能示例
Dec 20 Javascript
如何提高Dom访问速度
Jan 05 Javascript
vue监听键盘事件的快捷方法【推荐】
Jul 11 Javascript
JavaScript队列结构Queue实现过程解析
Mar 07 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
Jul 15 Javascript
js实现简易拖拽的示例
Oct 26 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会员权限控制实现原理分析
2011/05/29 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
phpmyadmin打开很慢的解决方法
2014/04/21 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
代码生成器 document.write()
2007/04/15 Javascript
javascript操作文本框readOnly
2007/05/15 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
JavaScript中for循环的几种写法与效率总结
2017/02/03 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
基于canvas粒子系统的构建详解
2017/08/31 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
2017/10/25 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
JS实现DOM删除节点操作示例
2018/04/04 Javascript
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
用Python代码来绘制彭罗斯点阵的教程
2015/04/03 Python
python操作sqlite的CRUD实例分析
2015/05/08 Python
python实现自动登录人人网并采集信息的方法
2015/06/28 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
HTTP状态码详解
2021/03/18 杂记
彪马西班牙官网:PUMA西班牙
2019/06/18 全球购物
如何开启linux的ssh服务
2013/06/03 面试题
Linux如何压缩可执行文件
2014/03/27 面试题
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
大三自我鉴定范文
2013/10/05 职场文书
实习计划书范文
2015/01/16 职场文书
联谊活动总结范文
2015/05/09 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL