地区查询
茶楼类型查询
茶楼列表
|
名称
|
地址
|
电话
|
特色
|
script.js
javascript
// 省份选择框联动城市选择框
document.getElementById('province').addEventListener('change', function() {let province = this.value;let citySelect = document.getElementById('city');// 清空城市选择框citySelect.innerHTML = '
';if (province !== '全部') {// 获取该省份下的城市列表fetch(`cities/${province}`).then(response => response.json()).then(data => {// 遍历城市列表并添加到城市选择框for (let city of data) {let option = document.createElement('option');option.value = city;option.textContent = city;citySelect.appendChild(option);}}).catch(error => {console.error('获取城市列表失败:', error);});}
});// 表单提交时进行查询
document.getElementById('region-search').addEventListener('submit', function(event) {event.preventDefault();let province = this.querySelector('select[name="province"]').value;let city = this.querySelector('select[name="city"]').value;// 组装查询参数let params = new URLSearchParams();params.append('province', province);params.append('city', city);// 发送查询请求fetch(`teahouses?${params.toString()}`).then(response => response.json()).then(data => {// 展示查询结果displayTeaList(data);}).catch(error => {console.error('获取茶楼信息失败:', error);});
});// 表单提交时进行查询
document.getElementById('type-search').addEventListener('submit', function(event) {event.preventDefault();let type = this.querySelector('select[name="type"]').value;// 组装查询参数let params = new URLSearchParams();params.append('type', type);// 发送查询请求fetch(`teahouses?${params.toString()}`).then(response => response.json()).then(data => {// 展示查询结果displayTeaList(data);}).catch(error => {console.error('获取茶楼信息失败:', error);});
});// 展示茶楼列表
function displayTeaList(data) {let teaList = document.getElementById('tea-list');let tbody = teaList.querySelector('tbody');// 清空原有内容tbody.innerHTML = '';// 遍历查询结果并添加到列表中for (let teahouse of data) {let tr = document.createElement('tr');let nameTd = document.createElement('td');nameTd.textContent = teahouse.name;tr.appendChild(nameTd);let addressTd = document.createElement('td');addressTd.textContent = teahouse.address;tr.appendChild(addressTd);let phoneTd = document.createElement('td');phoneTd.textContent = teahouse.phone;tr.appendChild(phoneTd);let featureTd = document.createElement('td');featureTd.textContent = teahouse.features;tr.appendChild(featureTd);tbody.appendChild(tr);}
}请求示例地区查询：`广东&city=深圳`类型查询：`特色茶楼`
