单击按钮,使用Jquery发送Ajax请求获取json文件中的数据,将河南省对应的所有地市信息显示在div中,url: "json/china-city.json",
时间: 2024-09-20 21:02:03 浏览: 43
load-json-on-button-click:显示如何在单击按钮时将JSON文件加载到页面上的代码
在jQuery中,你可以通过以下步骤实现单击按钮发送AJAX请求获取JSON文件中的数据,并将其显示在`div`元素中:
1. 首先,你需要包含jQuery库到HTML文件中:
```html
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
```
2. 创建一个HTML按钮,给它一个ID以便于后续操作:
```html
<button id="loadCitiesBtn">加载河南省地市</button>
<div id="cityList" style="display: none;"></div>
```
3. 使用JavaScript编写事件处理函数,当按钮被点击时,发送AJAX请求并解析JSON数据:
```javascript
$(document).ready(function() {
$('#loadCitiesBtn').click(function() {
$.ajax({
url: 'json/china-city.json', // JSON文件路径
dataType: 'json',
success: function(data) { // 请求成功回调
var cities = data['Hunan']; // 获取河南的地市数据,假设JSON结构中有省份键
if (cities) {
var cityDiv = $('#cityList');
cityDiv.empty(); // 清空已有内容
cities.forEach(function(city) {
cityDiv.append('<p>' + city.name + '</p>'); // 添加每个城市名到div
});
cityDiv.show(); // 显示div
} else {
console.log('河南省的数据未找到');
}
},
error: function(jqXHR, textStatus, errorThrown) {
console.error('加载数据失败:', textStatus, errorThrown);
}
});
});
});
```
在这个示例中,我们假设JSON文件的结构如下:
```json
{
"Hunan": [
{"name": "郑州市"},
{"name": "洛阳市"},
... // 其他地市
],
// 其他省份
}
```
阅读全文