Ajax二级联动菜单实现原理及代码

一、Ajax二级联动菜单实现原理

Ajax二级联动菜单是通过Ajax技术来实现的。具体实现过程如下：

通过JavaScript监听第一级菜单的改变事件；
使用XMLHttpRequest对象向服务器发送异步请求，获取第二级菜单的数据；
解析服务器返回的数据，生成第二级菜单选项；
将第二级菜单选项插入到HTML页面中。

二、Ajax二级联动菜单代码示例

下面是一个使用Ajax实现二级联动菜单的代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax二级联动菜单示例</title>
    <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function () {
            $("select[name='province']").change(function () {
                var selectedValue = $(this).val();
                $.ajax({
                    type: "get",
                    url: "getCity.php",
                    data: {province: selectedValue},
                    dataType: "json",
                    success: function (data) {
                        if (data && data.length > 0) {
                            $("select[name='city']").empty();
                            $("select[name='city']").append("<option value=''>请选择城市</option>");
                            $.each(data, function (i, item) {
                                $("select[name='city']").append("<option value='" + item.code + "'>" + item.name + "</option>");
                            });
                        }
                    },
                    error: function () {
                        alert("发生错误，请稍后重试！");
                    }
                });
            });
        });
    </script>
</head>
<body>
<form>
    <select name="province">
        <option value="">请选择省份</option>
        <option value="1">北京</option>
        <option value="2">上海</option>
    </select>
    <select name="city">
        <option value="">请选择城市</option>
    </select>
</form>
</body>
</html>

上面的代码中，我们将省份和城市的数据存储在数据库中，并通过PHP来实现数据的查询和返回。具体实现过程如下：

在页面中引入jQuery库，以便使用jQuery的ajax方法；
使用jQuery的change方法监听省份下拉框的改变事件；
在change方法中，使用ajax方法向服务器发送异步请求，获取城市数据；
服务器返回城市数据后，通过jQuery的each方法遍历数据，并向城市下拉框中添加选项。

说明：

省份和城市数据应该存储在数据库中；
在本例中，我们使用PHP实现数据的查询和返回；
城市数据应该为JSON格式的字符串，例如：[{"name":"北京市","code":"1"},{"name":"上海市","code":"2"}]。

三、另一个Ajax二级联动菜单的代码示例

下面是另一个使用Ajax实现二级联动菜单的代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Ajax二级联动菜单示例</title>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("select#province").change(function () {
                var selectedProvince = $("select#province").val();
                $.ajax({
                    type: "GET",
                    url: "getCitys.php",
                    data: "province=" + selectedProvince,
                    dataType: "json",
                    success: function (data) {
                        var citys = data.citys;
                        if (citys) {
                            $("select#city").empty();
                            $.each(citys, function (i, item) {
                                $("select#city").append("<option value='" + item + "'>" + item + "</option>");
                            });
                        }
                    }
                });
            });
        });
    </script>
</head>

<body>
<form>
    <label>省份：</label>
    <select id="province">
        <option value="">请选择</option>
        <option value="北京市">北京市</option>
        <option value="天津市">天津市</option>
    </select>
    <br/>

    <label>城市：</label>
    <select id="city">
        <option value="">请选择</option>
    </select>
</form>
</body>

</html>

上面的代码中，我们将省份和城市的数据存储在JavaScript数组中。具体实现方法如下：

在页面中引入jQuery库，以便使用jQuery的ajax方法；
使用jQuery的change方法监听省份下拉框的改变事件；
在change方法中，使用ajax方法向服务器发送异步请求，获取城市数据；
服务器返回城市数据后，通过jQuery的each方法遍历数据，并向城市下拉框中添加选项。

说明：

省份和城市数据存储在JavaScript数组中，实际应用中应该存储在数据库中；
每一个省份对应的城市数据应该以JSON格式的字符串的形式返回。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Ajax二级联动菜单实现原理及代码 - Python技术站

Ajax二级联动菜单实现原理及代码

相关文章