利用了jquery的ajax实现二级联互动菜单
更新时间：2013年12月02日 17:26:56 作者：
二级联互动菜单，利用了jquery的ajax实现，具体实现如下，喜欢的朋友可以参考下
菜单资源保存在数据库中。利用了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);
}
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连接mysql与php通过odbc连接任意数据库的实例
下面小编就为大家分享一篇javascript连接mysql与php通过odbc连接任意数据库的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
TypeScript由微软开发的自由和开源的编程语言，是一种给 JavaScript 添加特性的语言扩展，接下来通过本文给大家介绍TypeScript 中如何限制对象键名的取值范围，感兴趣的朋友跟随小编一起看看吧2021-05-05
项目需要做了如下的东西，希望能给其他需要的同学们一点参考。2010-08-08
微信小程序scroll-view实现上拉加载数据重复的解决方法
这篇文章主要为大家详细介绍了微信小程序scroll-view实现上拉加载数据重复的解决方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了异步JS框架的作用以及使用方法2015-10-10
这篇文章主要介绍了js实现select跳转菜单新窗口效果代码分享，实现很简单，推荐给大家，有需要的小伙伴可以参考下2015-08-08
ESLint是一种JavaScript代码检查工具,开发者可以通过自定义规则进行代码风格和质量的控制,使用ESLint的过程包括安装、初始化配置、配置规则、运行ESLint检查代码、与编辑器集成,以及与构建工具集成等,需要的朋友可以参考下2024-09-09
javascript基于原型链的继承及call和apply函数用法分析
这篇文章主要介绍了javascript基于原型链的继承及call和apply函数用法,结合实例形式较为详细的分析了javascript中继承的概念、创建方法以及call和apply函数的功能与使用技巧,需要的朋友可以参考下2016-12-12
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
这篇文章主要介绍了微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能,结合图文与实例形式详细分析了微信小程序选项卡切换相关操作实现技巧,需要的朋友可以参考下2019-05-05
这篇文章主要介绍了JSLint提高JS代码质量的方法，有需要的朋友可以参考一下2013-12-12
最新评论