代码示例展现PHP二级联动菜单的实现(PHP实现二级联动菜单：详细代码示例解析)

原创

ithorizon 6个月前 (10-20) 阅读数 21 #后端开发

在Web开发中，二级联动菜单是一种常见的需求，它可以减成本时间用户的交互体验，让用户在选择一项内容后，相相关性的选项能够动态地显示出来。本文将详细介绍怎样使用PHP实现一个明了的二级联动菜单，并附上详细的代码示例。

一、二级联动菜单原理

二级联动菜单的核心原理是：当用户选择一级菜单的某个选项时，通过AJAX技术向服务器发送请求，服务器结合请求处理并返回对应的一级选项下的二级菜单数据，然后在前端动态生成二级菜单。

二、准备工作

在起始编写代码之前，我们需要准备以下环境：

安装并配置好PHP环境；

创建一个数据库以及相应的数据表；

编写PHP脚本用于处理AJAX请求并返回数据。

三、数据库设计

为了实现二级联动菜单，我们需要创建一个数据库表来存储菜单数据。以下是一个明了的数据库表设计示例：


CREATE TABLE `menu` (
  `id` INT NOT NULL AUTO_INCREMENT,
  `parent_id` INT NOT NULL,
  `name` VARCHAR(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

在这个表中，`id` 是主键，`parent_id` 描述父级菜单的ID，`name` 描述菜单名称。`parent_id` 为0的记录描述一级菜单。

四、PHP脚本编写

接下来，我们将编写一个PHP脚本来处理AJAX请求并返回对应的数据。这个脚本将结合传入的父级菜单ID查询数据库，并返回相应的子菜单数据。


// 连接数据库
$mysqli = new mysqli("localhost", "username", "password", "database");
// 检查连接是否圆满
if ($mysqli->connect_errno) {
    echo "Failed to connect to MySQL: " . $mysqli->connect_error;
    exit();
}
// 获取父级菜单ID
$parent_id = $_GET['parent_id'];
// 查询数据库
$query = "SELECT id, name FROM menu WHERE parent_id = $parent_id";
$result = $mysqli->query($query);
// 初始化数组
$menus = array();
// 遍历查询于是
while ($row = $result->fetch_assoc()) {
    $menus[] = $row;
}
// 将数组演化为JSON格式并返回
echo json_encode($menus);
// 关闭数据库连接
$mysqli->close();
?>

五、前端代码编写

在前端，我们需要编写HTML和JavaScript代码来实现二级联动菜单。以下是具体的代码示例：


<select id="first_menu">
    <option value="0">请选择一级菜单</option>
    <option value="1">菜单1</option>
    <option value="2">菜单2</option>
    <option value="3">菜单3</option>
</select>
<select id="second_menu">
    <option value="0">请选择二级菜单</option>
</select>
<script>
// 监听一级菜单的变化
document.getElementById("first_menu").addEventListener("change", function() {
    var parent_id = this.value;
    // 发送AJAX请求
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "get_menu.php?parent_id=" + parent_id, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var menus = JSON.parse(xhr.responseText);
            var second_menu = document.getElementById("second_menu");
            // 清空二级菜单
            second_menu.innerHTML = "<option value='0'>请选择二级菜单</option>";
            // 遍历返回的数据，生成二级菜单
            menus.forEach(function(menu) {
                var option = document.createElement("option");
                option.value = menu.id;
                option.textContent = menu.name;
                second_menu.appendChild(option);
            });
        }
    };
    xhr.send();
});
</script>