Ajax实现多级联动菜单

最新推荐文章于 2021-08-06 02:26:00 发布

Baple

最新推荐文章于 2021-08-06 02:26:00 发布

阅读量1.8k

点赞数

分类专栏： WEB前端 C#/.NET JAVA 文章标签： AJAX 多级联动

JAVA 同时被 3 个专栏收录

282 篇文章 1 订阅

订阅专栏

C#/.NET

103 篇文章 2 订阅

订阅专栏

WEB前端

79 篇文章 0 订阅

订阅专栏

最近在重温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','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.连接数据库的工具类

[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！

Baple

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax实现多级联动菜单

最近在重温Ajax技术，就顺手拿起了当年的《Ajax经典案例开发大全》来温习。发现里面有些错误，现在就指出来，这样可以帮助后学者少走弯路。主要的技术有：MySql、JDBC、JSON、Ajax、JSP。其实本文不算原创，主要内容还是摘自《Ajax经典案例开发大全》。 1.数据库设计[sql] view plaincopyprint?drop datab
复制链接

扫一扫