项目结构：
项目运行：
技术要点：
1.4.1 技术要点
在分析具体的实现代码之前，先介绍一下本例的几个技术要点。
1 ．选项的动态创建与删除
document 对象的 createElement 方法可以用来创建一个 HTML 元素。创建好的元素可以通过
setAttribute 方法设置其属性。基于以上两点，创建一个选项可以封装的方法如下：
function createOption(value, text) {
var opt = document.createElement("option"); //创建一个 option 节点
opt.setAttribute("value", value); //设置 value
opt.appendChild(document.createTextNode(text)); //给节点加入文本信息
return opt;
}
当清除一个 select 列表的选项时，只需要重新设置选项的 length 属性为合适的值即可。本例中保留
列表的第 1 个选项，因此将传入的列表对象 length 属性赋值为 1。
function clearOptions(selNode) {
selNode.length = 1; //设置列表长度为 1，仅保留默认选项
selNode.options[0].selected = true; //选中默认选项
}
2 ．修改上级列表时重新初始化所有下级列表
当多级菜单全部选定后，如果用户重新选择了第一级列表，需要将其所有的下级列表全部初始化。
为了实现这个需求，本例创建了一个全局变量 selArray，以数组形式由上到下存放各级菜单的 id。在需
要初始化某级列表的下级时，对数组进行遍历即可确认下级列表的 id。
3 ．使用 JSON 格式传递选项数据
JSON（JavaScript Object Notation）是一种用 JavaScript 对象符号格式化文本的简单方法。由于其
方便人们阅读，易于机器解析和生成，所以主要被当作一种轻量级的数据交换格式来使用。JSON 主
要支持两种类型的数据结构：“名称/值”对集合和有序值列表。下面详细介绍一下 JSON 支持的数据
元素。
-- 值：可以是双引号引起来的字符串（string）、数字（number）、布尔值、对象、数组等。示
例如下：
"Hello"
2006
true
-- 名称/值对：名称是一个字符串，后面跟一个“:”，接着就应是这个名称对应的值，每个“名
称/值”对以一个“，”分隔。示例如下：
图 1.10 实例运行效果
"Hello":"你好",
"Year":2006,
"isRight":true
-- 对象：以“{”开始，“}”结束，是一个无序的“名称/值”对集合。示例如下：
{
"Hello":"你好",
"Year":2006,
"isRight":true
}
-- 数组：以“[”开始，“]”结束，是值的有序集合，数组中的值以“,”分隔。示例如下：
[
"item1",
"item2",
"item3"
]
根据上面的介绍，发现利用“名称/值对”的形式可以方便地表示每一个 option 的内容。示例如下：
-- option 原始格式
<select>
<option value="B11">列表 B 选项 11</option>
<option value="B12">列表 B 选项 12</option>
<option value="B13">列表 B 选项 13</option>
</select>
-- JSON 格式
{
‘B11‘:‘列表 B 选项 11‘,
‘B12‘:‘列表 B 选项 12‘,
‘B13‘:‘列表 B 选项 13‘
}
可以看到，使用 JSON 格式表示选项数据简洁明了，容易理解，非常适合用来进行数据交换。
数据库：
/* SQLyog Ultimate v12.09 (64 bit) MySQL - 5.5.53 : Database - ajaxexample_4 ********************************************************************* */ /*!40101 SET NAMES utf8 */; /*!40101 SET SQL_MODE=‘‘*/; /*!40014 SET @[email protected]@UNIQUE_CHECKS, UNIQUE_CHECKS=0 */; /*!40014 SET @[email protected]@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0 */; /*!40101 SET @[email protected]@SQL_MODE, SQL_MODE=‘NO_AUTO_VALUE_ON_ZERO‘ */; /*!40111 SET @[email protected]@SQL_NOTES, SQL_NOTES=0 */; CREATE DATABASE /*!32312 IF NOT EXISTS*/`ajaxexample_4` /*!40100 DEFAULT CHARACTER SET utf8 */; USE `ajaxexample_4`; /*Table structure for table `menu` */ DROP TABLE IF EXISTS `menu`; CREATE TABLE `menu` ( `id` varchar(255) NOT NULL COMMENT ‘主键‘, `text` varchar(255) NOT NULL COMMENT ‘显示内容‘, `pid` varchar(255) NOT NULL DEFAULT ‘0‘ COMMENT ‘父id‘, `sort` int(11) NOT NULL DEFAULT ‘0‘ COMMENT ‘排序‘, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; /*Data for the table `menu` */ insert into `menu`(`id`,`text`,`pid`,`sort`) values (‘A1‘,‘A1‘,‘0‘,0),(‘A2‘,‘A2‘,‘0‘,0),(‘A3‘,‘A3‘,‘0‘,0),(‘B1‘,‘B1‘,‘A1‘,0),(‘B2‘,‘B2‘,‘A1‘,0),(‘B3‘,‘B3‘,‘A1‘,0),(‘B4‘,‘B4‘,‘A2‘,0),(‘B5‘,‘B5‘,‘A2‘,0),(‘B6‘,‘B6‘,‘A2‘,0),(‘B7‘,‘B7‘,‘A3‘,0),(‘B8‘,‘B8‘,‘A3‘,0),(‘C1‘,‘C1‘,‘B1‘,0),(‘C2‘,‘C2‘,‘B1‘,0),(‘C3‘,‘C3‘,‘B2‘,0),(‘C4‘,‘C4‘,‘B3‘,0),(‘C5‘,‘C5‘,‘B4‘,0),(‘C6‘,‘C6‘,‘B4‘,0); /*!40101 SET [email protected]_SQL_MODE */; /*!40014 SET [email protected]_FOREIGN_KEY_CHECKS */; /*!40014 SET [email protected]_UNIQUE_CHECKS */; /*!40111 SET [email protected]_SQL_NOTES */;
GetOptionServlet.java:
package com.gordon.servlet;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import javax.servlet.Servlet;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.gordon.util.DBUtils;
/**
* Servlet implementation class GetOptionsServlet
*/
@WebServlet("/GetOptionsServlet")
public class GetOptionsServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public GetOptionsServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see Servlet#init(ServletConfig)
*/
public void init(ServletConfig config) throws ServletException {
// TODO Auto-generated method stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/text; charset=UTF-8;");
String selectedId = request.getParameter("selectedId"); // 获取 selectedId
// 参数
int counter = 0; // 计数器
StringBuffer opts = new StringBuffer("{"); // 保存选项信息
// 定义查询数据库的 SQL 语句
String sql = "select * from menu where pid = ? order by sort asc";
Connection conn = null; // 声明 Connection 对象
PreparedStatement pstmt = null; // 声明 PreparedStatement 对象
ResultSet rs = null; // 声明 ResultSet 对象
try {
conn = DBUtils.getConnection(); // 获取数据库连接
pstmt = conn.prepareStatement(sql); // 根据 sql 创建 PreparedStatement
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++; // 计数器加 1
}
} catch (SQLException e) {
System.out.println(e.toString());
} catch (ClassNotFoundException cnfe) {
System.out.println(cnfe.toString());
}
try {
rs.close(); // 关闭结果集
pstmt.close(); // 关闭 PreparedStatement
conn.close(); // 关闭连接
} catch (Exception e) {
System.out.println(e.getMessage());
}
opts.append("}");
response.getWriter().print(opts.toString());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
DBUtils.java
package com.gordon.util;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
public class DBUtils {
private static final String URL = "jdbc:mysql://localhost:3306/ajaxexample_4";
private static final String DRIVER = "com.mysql.jdbc.Driver";
private static final String USERNAME = "root";
private static final String PASSWORD = "root";
public static Connection getConnection() throws ClassNotFoundException, SQLException {
Class.forName(DRIVER);
return DriverManager.getConnection(URL, USERNAME, PASSWORD);
}
}
select.js
var xmlHttp; // 用于保存 XMLHttpRequest 对象的全局变量
var targetSelId; // 用于保存要更新选项的列表 id
var selArray; // 用于保存级联菜单 id 的数组
//初始化列表数组（按等级）
function initSelArray() {
selArray = arguments; // arguments 对象包含了传入的所有参数
}
// 用于创建 XMLHttpRequest 对象
function createXmlHttp() {
// 根据 window.XMLHttpRequest 对象是否存在使用不同的创建方式
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest(); // FireFox、Opera 等浏览器支持的创建方式
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); // IE 浏览器支持的创建方式
}
}
// 获取列表选项的调用函数
function buildSelect(selectedId, targetId) {
if (selectedId == "") { // selectedId 为空串表示选中了默认项
clearSubSel(targetId); // 清除目标列表及下级列表中的选项
return; // 直接结束调用，不必向服务器请求信息
}
targetSelId = targetId; // 将传入的目标列表 id 赋值给 targetSelId 变量
createXmlHttp(); // 创建 XmlHttpRequest 对象
xmlHttp.onreadystatechange = buildSelectCallBack; // 设置回调函数
xmlHttp.open("GET", "GetOptionsServlet?selectedId=" + selectedId, true);
xmlHttp.send(null);
}
//根据传入的 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 buildSelectCallBack() {
if (xmlHttp.readyState == 4) {
// 将从服务器获得的文本转为对象直接量
var optionsInfo = eval("(" + xmlHttp.responseText + ")");
var targetSelNode = document.getElementById(targetSelId);
clearSubSel(targetSelId); // 清除目标列表及下级列表中的选项
// 遍历对象直接量中的成员
for ( var o in optionsInfo) {
// 在目标列表追加新的选项
targetSelNode.appendChild(createOption(o, optionsInfo[o]));
}
}
}
//清除传入的列表节点内所有选项
function clearOptions(selNode) {
selNode.length = 1; // 设置列表长度为 1，仅保留默认选项
selNode.options[0].selected = true; // 选中默认选项
}
// 清除下级子列表选项
function clearSubSel(targetId) {
var canClear = false; // 设置清除开关，初始值为假
for (var i = 0; i < selArray.length; i++) { // 遍历列表数组
if (selArray[i] == targetId) { // 当遍历至目标列表时，打开清除开关
canClear = true;
}
if (canClear) { // 从目标列表开始到最下级列表结束，开关始终保持打开
clearOptions(document.getElementById(selArray[i])); // 清除该级列表选项
}
}
}
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>多级联动菜单</title> <script type="text/javascript" src="js/select.js"></script> </head> <!-- 页面加载完毕做两件事：1.初始化列表数组 2.为第 1 个列表赋值 --> <body > <h1>多级联动菜单</h1> <table> <tr> <td>列表 A</td> <td><select name="selA" id="selA" onchange="buildSelect(this.value, ‘selB‘)"> <option value="" selected>------请选择------</option> </select></td> </tr> <tr> <td>列表 B</td> <td><select name="selB" id="selB" onchange="buildSelect(this.value, ‘selC‘)"> <option value="" selected>------请选择------</option> </select></td> </tr> <tr> <td>列表 C</td> <td><select name="selC" id="selC"> <option value="" selected>------请选择------</option> </select></td> </tr> </table> </body> </html>
+++++++++++++++++++++++++++
参考：ajax实用案例大全-1动态加载数据 https://wenku.baidu.com/view/c7897bf4700abb68a982fb91.html
时间： 2024-10-29 19:07:13