利用ajax实现<!--页面刚加载就开始发送ajax请求获取省信息展示--> <select id="provice"> <option>请选择省</option> </select> <!--省发生onchange事件的时候获取对应的市信息展示--> <select id="city"> <option>请选择市</option> </select>
时间: 2023-08-17 20:25:19 浏览: 98
好的,你可以参考下面的代码示例实现省市级联选择:
```html
<select id="province">
<option>请选择省</option>
</select>
<select id="city">
<option>请选择市</option>
</select>
<script>
// 页面加载时发送 Ajax 请求获取省信息
window.onload = function() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var provinces = JSON.parse(xhr.responseText);
var provinceSelect = document.getElementById('province');
// 遍历省信息,添加到省下拉框中
for (var i = 0; i < provinces.length; i++) {
var option = document.createElement('option');
option.value = provinces[i].id;
option.innerHTML = provinces[i].name;
provinceSelect.appendChild(option);
}
}
};
xhr.open('GET', 'getProvince.php', true);
xhr.send();
}
// 省下拉框发生 onchange 事件时发送 Ajax 请求获取对应的市信息
var provinceSelect = document.getElementById('province');
provinceSelect.onchange = function() {
var provinceID = provinceSelect.value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var cities = JSON.parse(xhr.responseText);
var citySelect = document.getElementById('city');
// 清空市下拉框中的选项
citySelect.innerHTML = '<option>请选择市</option>';
// 遍历市信息,添加到市下拉框中
for (var i = 0; i < cities.length; i++) {
var option = document.createElement('option');
option.value = cities[i].id;
option.innerHTML = cities[i].name;
citySelect.appendChild(option);
}
}
};
xhr.open('GET', 'getCity.php?provinceID=' + provinceID, true);
xhr.send();
}
</script>
```
在这个示例中,我们定义了两个下拉框,用于选择省和市。在页面加载时,我们发送 Ajax 请求获取省信息,并将省信息添加到省下拉框中。
当省下拉框发生 onchange 事件时,我们根据选择的省 ID 发送 Ajax 请求获取对应的市信息,并将市信息添加到市下拉框中。需要注意的是,在服务器端,我们需要根据省 ID 进行相应的查询操作,并返回查询结果。在客户端,我们需要对返回结果进行适当的处理和显示,以便用户可以清晰地知道查询结果。同时,为了保证系统的安全性,我们还需要对用户输入进行校验和过滤,以防止 SQL 注入等攻击。
阅读全文