Description: Initial Page
Image:
Description: First Level menu
Image:
Description: Level Two menu
Image:
Implement dynamic menus using AJAX. The menu contents are read from the database. The related tables are defined as follows:
CREATE TABLE [dbo]. [Tsys_menu] (
[MN_ID] [varchar] () COLLATE chinese_prc_ci_as not NULL,
[PARENT_MN_ID] [varchar] () COLLATE chinese_prc_ci_as not NULL,
[Mn_name] [varchar] (m) COLLATE chinese_prc_ci_as not NULL,
[Mn_order] [INT] Not NULL,
[Mn_type] [Char] (1) COLLATE chinese_prc_ci_as not NULL,
[Target_url] [varchar] (m) COLLATE chinese_prc_ci_as not NULL,
[Exp_url] [varchar] (m) COLLATE chinese_prc_ci_as NULL,
[Help_url] [varchar] (m) COLLATE chinese_prc_ci_as NULL,
[Memo] [varchar] (m) COLLATE chinese_prc_ci_as NULL,
[Context_type] [Char] (1) COLLATE chinese_prc_ci_as NULL,
[Manual_type] [Char] (1) COLLATE chinese_prc_ci_as NULL,
[Expert_type] [Char] (1) COLLATE chinese_prc_ci_as NULL,
[Case_type] [Char] (1) COLLATE chinese_prc_ci_as NULL
) on [PRIMARY]
Go
This example uses the Ajax templates in dev2dev.bea.com.cn. The original address is as follows:
Http://dev2dev.bea.com.cn/bbsdoc/20051114125.html
Author: Kozhong
I suggest that everyone take a serious look at the article, it is really good writing.
The following is the page content ybg-menu.htm
<title>menu</title>
<script language= "JavaScript" >
var http_request = false;
var currentpos = false;
function send_request (URL) {//initialization, specifying handler functions, sending requests
Http_request = false;
Start initializing the XMLHttpRequest object
if (window. XMLHttpRequest) {//mozilla browser
Http_request = new XMLHttpRequest ();
if (http_request.overridemimetype) {//Set MIME category
Http_request.overridemimetype ("Text/xml");
}
}
else if (window. ActiveXObject) {//IE browser
try {
Http_request = new ActiveXObject ("Msxml2.xmlhttp");
catch (e) {
try {
Http_request = new ActiveXObject ("Microsoft.XMLHTTP");
catch (e) {}
}
}
if (!http_request) {//exception, failed to create object instance
Window.alert ("Cannot create XMLHttpRequest object instance.");
return false;
}
Http_request.onreadystatechange = ProcessRequest;
Determine how and when the request is sent and whether the next code is executed synchronously
Http_request.open ("Get", url, True);
Http_request.send (NULL);
}
Functions that process return information
function ProcessRequest () {
if (http_request.readystate = = 4) {//Judge object state
if (Http_request.status = = 200) {//information has been successfully returned to start processing information
document.getElementById (currentpos). InnerHTML = Http_request.responsetext;
} else {//page is not normal
Alert ("The page you are requesting has an exception.) ");
}
}
}
function ShowMenu (obj) {
document.getElementById (obj). ParentNode.style.display = "";
document.getElementById (obj). InnerHTML = "reading data ..."
Currentpos = obj;
Send_request ("playmenu.jsp?parent_id=" +obj);
}
</script>
<body>
<table>
<tr>
<td>
<a href= "Javascript:showmenu (' ROOT ')" >ROOT</a>
<td>
</tr>
<tr>
<TD id= ' ROOT ' ></td>
</tr>
</table>
</body>
The following is the JSP content playmenu.jsp
<%@ page contenttype= "TEXT/HTML;CHARSET=GBK"%>
<% @page import= "Com.jfcgf.frame.util.DbUtil"%>
<%@ page import= "java.sql.*"%>
<%
Dbutil db = new Dbutil ();
String parent_id = Request.getparameter ("parent_id");
String sql = "Select Mn_id,mn_name from tsys_menu where parent_mn_id = '" +parent_id+ "";
Execute the above SQL
try{
ResultSet rs = db.executequery (SQL);
while (Rs.next ()) {
String item = "<table><tr valign=/" top/"><td>----></td><td><a href=/" javascript : ShowMenu (/' "+rs.getstring (" mn_id ") +" ')/">" +
Rs.getstring ("mn_name") + "</a></td><td id= '" +rs.getstring ("mn_id") + "' ></td></tr> <br/></table> ";
OUT.PRINTLN (item);
}
}catch (Exception e) {
Out.println (E.tostring ());
}finally{
if (db!= null) {
Db.closeconnection (); db = null;
}
}
%>
Note: The Dbutil class is a javabean that connects to the database, and if you want to try the above code, you need to change it to your own class.
The attachment is a screenshot of the implementation run.
