当然，我可以为你提供一个简单的Ajax级联菜单的实例代码。这里我将使用HTML, JavaScript (借助jQuery库来简化Ajax调用) 和一个简单的服务器端语言（假设是PHP）来模拟后端数据获取。
### HTML 部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax级联菜单示例</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#category').change(function() {
var categoryId = $(this).val();
$.ajax({
url: 'get_subcategories.php',
type: 'GET',
data: { categoryId: categoryId },
success: function(response) {
$('#subcategory').html(response);
}
});
});
});
</script>
</head>
<body>
<label for="category">选择类别:</label>
<select id="category">
<option value="">请选择...</option>
<option value="1">电子产品</option>
<option value="2">服装</option>
<!-- 假设有更多的类别 -->
</select>
<label for="subcategory">选择子类别:</label>
<select id="subcategory">
<option value="">请先选择类别...</option>
</select>
</body>
</html>
### PHP 部分 (`get_subcategories.php`)
这个PHP脚本会接收一个`categoryId`参数，并返回相应的子类别选项。这里为了简化，我直接写了一个静态的示例。
<?php
$categoryId = isset($_GET['categoryId']) ? $_GET['categoryId'] : '';
// 假设这是从数据库或其他数据源获取的
$subcategories = [
'1' => ['智能手机', '平板电脑', '笔记本电脑'],
'2' => ['男装', '女装', '童装']
];
if (!empty($categoryId) && isset($subcategories[$categoryId])) {
echo '<option value="">请选择...</option>';
foreach ($subcategories[$categoryId] as $subcategory) {
echo "<option value='$subcategory'>$subcategory</option>";
}
}
?>
在这个例子中，当用户在`#category`下拉菜单中选择一个类别时，会触发一个Ajax请求到`get_subcategories.php`，该请求携带当前选中的类别ID作为参数。PHP脚本根据这个ID返回相应的子类别选项，然后这些选项会被动态地插入到`#subcategory`下拉菜单中。
注意：这只是一个非常基础的示例，实际应用中可能需要考虑更多的安全性和性能问题，比如使用HTTPS、防止SQL注入、优化数据库查询等。