Ajax实现多级联动菜单

最近在重温Ajax技术，就顺手拿起了当年的《Ajax经典案例开发大全》来温习。发现里面有些错误，现在就指出来，这样可以帮助后学者少走弯路。主要的技术有：MysqL、JDBC、JSON、Ajax、JSP。其实本文不算原创，主要内容还是摘自《Ajax经典案例开发大全》。

1.数据库设计

[sql] view plaincopyprint?

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',2);
insert into select_menu values('B11','列表B选项11','A1',1);
insert into select_menu values('B12','列表B选项12',2);
insert into select_menu values('B13','列表B选项13',3);
insert into select_menu values('B21','列表B选项21','A2',1);
insert into select_menu values('B22','列表B选项22',2);
insert into select_menu values('C111','列表C选项111','B11',1);
insert into select_menu values('C112','列表C选项112',2);
insert into select_menu values('C121','列表C选项121','B12',1);
insert into select_menu values('C122','列表C选项122',2);
insert into select_menu values('C131','列表C选项131','B13',1);
insert into select_menu values('C132','列表C选项132',2);
insert into select_menu values('C211','列表C选项211','B21',1);
insert into select_menu values('C212','列表C选项212',2);
insert into select_menu values('C221','列表C选项221','B22',1);
insert into select_menu values('C222','列表C选项222',2);

2.连接数据库的工具类

[java] view plaincopyprint?

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页面

[html] view plaincopyprint?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>多级联动菜单</title>

4.select_menu.jsp后台服务

[html] view plaincopyprint?

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.sql.*,com.lanp.ajax.db.DBUtils" %>
<%!
//访问数据库取得下级选项信息
String getOptions(String selectedId) {
int counter = 0;
StringBuffer opts = new StringBuffer("{");
String sql = "select * from select_menu where pid=? order by seq asc";
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rs = null;
try {
conn = DBUtils.getConnection();
pstmt = conn.prepareStatement(sql);
pstmt.setString(1,selectedId);
rs = pstmt.executeQuery();

while(rs.next()) {
//如果不是第一项，追加一个","用于分隔选项
if(counter > 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();
}
%>

<% out.clear(); String selectedId = request.getParameter("selectedId"); String optionsInfo = getOptions(selectedId); out.print(optionsInfo); %> OK，TKS！

Ajax实现多级联动菜单

猜你在找的Ajax相关文章