Ajax技术实现级联菜单项

最新推荐文章于 2021-09-15 19:14:09 发布

最新推荐文章于 2021-09-15 19:14:09 发布 · 149 阅读

文章标签：

本文介绍了一种使用Java Web技术实现动态树状菜单的方法，通过前后端分离的方式，前端利用JavaScript实现双击展开子菜单的功能，而后端则通过Servlet获取并返回子类目数据。

1.<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<%@ page import="com.bjsxt.shopping.category.*, java.util.*"%>

<%
List<Category> categories = CategoryService.getInstance().getTopCategories();
%>

<html>
<head>
<script language="javascript" src="script/TV20.js"></script>
<script language="javascript">
var req;
var gKey;
function init() {
if(window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
}

function myLabelDblClick(key, parentKey) {
if(findNode(key).subitems.length > 0) return;
init();
gKey = key;
var url = "GetCategoryChilds2.jsp?id=" + escape(key);
req.open("GET", url, true);
req.onreadystatechange = callback;
req.send(null);
}

function callback() {
if(4 == req.readyState) {
if(200 == req.status) {
eval(req.responseText);
var node = findNode(gKey);
if(node.subitems.length > 0) {
node.refresh();
node.open();
}
}
}

}

</script>
</head>

<body>
<script language="javascript">

</script>
</body>
</html>

2GetCategoryChilds2.jsp页面代码

.<%@ page language="java" import="com.bjsxt.shopping.category.*, java.util.*" %>
<%
int id = Integer.parseInt(request.getParameter("id"));

List<Category> childs = CategoryService.getInstance().getChilds(id) ;
System.out.println(childs.size());
StringBuffer buf = new StringBuffer();

for(int i=0; i<childs.size(); i++) {
Category c = childs.get(i);
buf.append("addNode(" + id + "," + c.getId() + ",'" + c.getName() + "','images/top.gif');" + "/n");
}

response.setContentType("text/html;charset=gbk");
response.setHeader("Cache-Control", "no-store"); //HTTP1.1
response.setHeader("Pragma", "no-cache"); //HTTP1.0
response.setDateHeader("Expires", 0); //prevents catching at proxy server

response.getWriter().write(buf.toString());
%>