JavaScript之AJAX实现二级联动菜单(jsp+js+servlet

这篇文章距离上次修改已过191天，其中的内容可能已经有所变动。

以下是一个简化的示例，展示了如何使用JavaScript和AJAX实现二级联动菜单的前端部分。




<!DOCTYPE html>
<html>
<head>
    <title>二级联动菜单示例</title>
    <script type="text/javascript">
        function fetchSubCategories(categoryId) {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    document.getElementById('subcategory').innerHTML = xhr.responseText;
                }
            };
            xhr.open("GET", "GetSubCategoriesServlet?categoryId=" + categoryId, true);
            xhr.send();
        }
    </script>
</head>
<body>
    <form>
        一级分类:
        <select onchange="fetchSubCategories(this.value);">
            <option value="">请选择一级分类</option>
            <option value="1">分类1</option>
            <option value="2">分类2</option>
            <!-- 其他一级分类 -->
        </select>
        <br/><br/>
        二级分类:
        <select id="subcategory">
            <option value="">请先选择一级分类</option>
        </select>
    </form>
</body>
</html>

在这个示例中，我们有一个HTML表单，其中包含两个下拉菜单。第一个是一级分类，第二个是二级分类。当用户选择一级分类时，通过onchange事件触发fetchSubCategories函数。这个函数使用AJAX向服务器发送GET请求，请求的URL携带被选择的一级分类的ID。

服务器端（Servlet）需要处理这个请求并返回对应一级分类下的二级分类列表。然后，这个返回的列表被用来更新二级分类下拉菜单的innerHTML。

注意：这个示例假设你已经有一个Servlet设置来处理名为GetSubCategoriesServlet的请求，并且能够根据提供的categoryId返回相应的二级分类HTML选项列表。

JavaScript之AJAX实现二级联动菜单(jsp+js+servlet

评论已关闭

推荐阅读