Ajax 멀티플렉스 메뉴 구현
7490 단어 IT 해양 - 웹
1.데이터베이스 디자인
drop database if exists mydb;
create database mydb character set gbk;
--
use mydb;
drop table if exists select_menu;
create table select_menu(
id varchar(255) not null default '',
text varchar(255) not null,
pid varchar(255) not null,
seq int(11) not null default 0,
primary key (id)
)ENGINE=InnoDB DEFAULT CHARSET=gbk;
insert into select_menu values('A1',' A 1','INIT',1);
insert into select_menu values('A2',' A 2','INIT',2);
insert into select_menu values('B11',' B 11','A1',1);
insert into select_menu values('B12',' B 12','A1',2);
insert into select_menu values('B13',' B 13','A1',3);
insert into select_menu values('B21',' B 21','A2',1);
insert into select_menu values('B22',' B 22','A2',2);
insert into select_menu values('C111',' C 111','B11',1);
insert into select_menu values('C112',' C 112','B11',2);
insert into select_menu values('C121',' C 121','B12',1);
insert into select_menu values('C122',' C 122','B12',2);
insert into select_menu values('C131',' C 131','B13',1);
insert into select_menu values('C132',' C 132','B13',2);
insert into select_menu values('C211',' C 211','B21',1);
insert into select_menu values('C212',' C 212','B21',2);
insert into select_menu values('C221',' C 221','B22',1);
insert into select_menu values('C222',' C 222','B22',2);2.데이터베이스에 연결된 도구 클래스
package com.lanp.ajax.db;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
/**
* ,
* @author lanp
* @since 2012-2-29 22:27
*/
public final class DBUtils {
private static String url = "jdbc:mysql://localhost:3306/mydb?characterEncoding=gbk";
private static String user = "root";
private static String psw = "root";
private static Connection conn;
static {
try {
Class.forName("com.mysql.jdbc.Driver");
} catch (ClassNotFoundException e) {
e.printStackTrace();
throw new RuntimeException(e);
}
}
private DBUtils() {
}
/**
*
* @return conn
*/
public static Connection getConnection() {
try {
conn = DriverManager.getConnection(url, user, psw);
} catch (SQLException e) {
e.printStackTrace();
throw new RuntimeException(e);
}
return conn;
}
/**
*
* @param conn
* @param pstmt
* @param rs
*/
public static void closeResources(Connection conn,PreparedStatement pstmt,ResultSet rs) {
if(null != rs) {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
throw new RuntimeException(e);
} finally {
if(null != pstmt) {
try {
pstmt.close();
} catch (SQLException e) {
e.printStackTrace();
throw new RuntimeException(e);
} finally {
if(null != conn) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
throw new RuntimeException(e);
}
}
}
}
}
}
}
}
3.select_menu.html페이지
var xmlHttp; // XMLHttpRequest
var targetSelId; // ID
var selArray = new Array(); // ID ，《Ajax 》 = new Array()
// XMLHttpRequest
function createXmlHttp() {
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
//
function buildSelect(selectedId,targetId) {
if("" == selectedId) { //selectedId
clearSubSel(targetId); //
return; // ，
}
targetSelId = targetId; // ID targetSelId
createXmlHttp(); // XMLHttpRequest
xmlHttp.onreadystatechange = buildSelectCallBack; //
xmlHttp.open("GET", "select_menu.jsp?selectedId="+selectedId, true);
xmlHttp.send(null);
}
//
function buildSelectCallBack() {
if(4 == xmlHttp.readyState) {
//
var optionsInfo = eval("(" + xmlHttp.responseText + ")");
var targetSelNode = document.getElementById(targetSelId);
clearSubSel(targetSelId);
//
for(var o in optionsInfo) {
//
targetSelNode.appendChild(createOption(o,optionsInfo[o]));
}
}
}
// value text
function createOption(value,text) {
var opt = document.createElement("option"); // option
opt.setAttribute("value", value); // value
opt.appendChild(document.createTextNode(text)); //
return opt;
}
//
function clearOptions(selNode) {
selNode.options.length = 1;
selNode.options[0].selected = true;
}
// ，《Ajax 》
function initSelArray(selA,selB,selC) {
selArray[0] = selA;
selArray[1] = selB;
selArray[2] = selC;
}
//
function clearSubSel(targetId) {
var len = selArray.length;
for(var i=0;i<len;i++) {
var j = 0;
if(selArray[i] == targetId) {
j = i;
break;
}
}
for(; j<len; j++) {
clearOptions(document.getElementById(selArray[j]));
}
//《Ajax 》 ， ， ， ：
//var canClear = false;
//for(var i=0; i<selArray.length; i++) {
// if(selArray[i] == targetId) {
// canClear = true;
// }
// if(canClear) {
// clearOptions(document.getElementById(selArray[i]));
// }
//}
}
A
B
C
4.select_menu.jsp 백엔드 서비스
0) {
opts.append(",");
}
opts.append("'");
opts.append(rs.getString("id"));
opts.append("':'");
opts.append(rs.getString("text"));
opts.append("'");
counter++;
}
} catch(SQLException e) {
System.out.println(e.toString());
} finally {
DBUtils.closeResources(conn,pstmt,rs);
}
opts.append("}");
System.out.println(opts.toString());
return opts.toString();
}
%>
OK,TKS!
좋은 웹페이지 즐겨찾기
