利用了jquery的ajax实现二级联互动菜单

前端技术 2023/09/07 JavaScript
菜单资源保存在数据库中。利用了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);

}

本文地址：https://www.stayed.cn/item/19662

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案