借助了jquery的ajax实现二级联互动菜单

发布时间：2023-08-09 14:37:55 所属栏目：教程来源：

导读：菜单资源保存在数据库中。利用了jquery的ajax实现。用到的包有：json-lib-2.2.3-jdk15.jar ezmorph-1.0.6.jar json.js jquery.js

jsp页面的代码：

代码如下:

<%@ page contentType="text/html; charset=

菜单资源保存在数据库中。利用了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);

}

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!