利用了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中Eval函数的使用说明
Oct 11 Javascript
jQuery下的几个你可能没用过的功能
Aug 29 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
JavaScript中实现Map的示例代码
Sep 09 Javascript
jQuery实现的AJAX简单弹出层效果代码
Nov 26 Javascript
Bootstrap fileinput组件封装及使用详解
Mar 10 Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 Javascript
React如何避免重渲染
Apr 10 Javascript
JS实现字符串去重及数组去重的方法示例
Apr 21 Javascript
webpack4简单入门实例
Sep 06 Javascript
vue和better-scroll实现列表左右联动效果详解
Apr 29 Javascript
JS指定音频audio在某个时间点进行播放
Nov 28 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
实用函数7
2007/11/08 PHP
php后台程序与Javascript的两种交互方式
2009/10/25 PHP
php解析xml方法实例详解
2015/05/12 PHP
php支付宝系列之电脑网站支付
2018/05/30 PHP
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
解决遍历时Array.indexOf产生的性能问题
2012/07/03 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
JavaScript基于setTimeout实现计数的方法
2015/05/08 Javascript
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
Nodejs express框架一个工程中同时使用ejs模版和jade模版
2015/12/28 NodeJs
JavaScript深度复制(deep clone)的实现方法
2016/02/19 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
详解Node.js中的Async和Await函数
2018/02/22 Javascript
微信小程序中进行地图导航功能的实现方法
2018/06/29 Javascript
layui弹出层按钮提交iframe表单的方法
2018/08/20 Javascript
详解Vue、element-ui、axios实现省市区三级联动
2019/05/07 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
Vue实现数据表格合并列rowspan效果
2020/11/30 Javascript
微信小程序之高德地图多点路线规划过程示例详解
2021/01/18 Javascript
详解Python中dict与set的使用
2015/08/10 Python
python实现批量按比例缩放图片效果
2018/03/30 Python
解决Tensorflow使用pip安装后没有model目录的问题
2018/06/13 Python
python中安装django模块的方法
2020/03/12 Python
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
以特惠价提供在线奢侈品购物:FRMODA.com
2018/01/25 全球购物
融资租赁计划书
2014/04/29 职场文书
支行行长竞聘演讲稿
2014/05/15 职场文书
学生干部培训方案
2014/06/12 职场文书
品牌转让协议书
2014/08/20 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
科技活动周标语
2014/10/08 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书