你能举一个简单的Ajax联动查询示例吗?
时间: 2024-09-23 07:00:37 浏览: 1
当然可以。下面是一个简单的使用JavaScript和jQuery的Ajax联动查询示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<select id="province" onchange="loadCities()">
<option value="">请选择省份</option>
<!-- 后续省市区数据由后台提供 -->
</select>
<select id="city" style="display:none;"></select>
<script>
function loadCities() {
var provinceValue = $('#province').val();
if (provinceValue) {
$.ajax({
url: 'your_server_url?province=' + provinceValue,
type: "GET",
dataType: "json", // 假设服务器返回的是JSON数据
success: function(data) { // 数据成功获取
$('#city').empty(); // 清空已有的选项
$.each(data, function(index, cityData) {
$('#city').append('<option value="' + cityData.id + '">' + cityData.name + '</option>');
});
$('#city').show(); // 显示城市选项
},
error: function(error) {
console.error('获取城市数据失败:', error);
}
});
} else {
$('#city').hide(); // 如果未选择省份,则隐藏城市选项
}
}
</script>
</body>
</html>
```
在这个例子中,当用户更改了省份下拉列表的选择时,会触发`loadCities()`函数,通过Ajax向服务器请求该省份下的城市数据,然后动态更新城市选项。