单击按钮,使用Jquery发送Ajax请求获取json文件中的数据,将河南省对应的所有地市信息显示在div中file:///C:/Users/42818/Desktop/china-city.json
时间: 2024-09-21 08:04:03 浏览: 49
在jQuery中,你可以通过单击按钮触发一个事件,然后使用`.ajax()`方法来发送异步GET请求到指定的JSON文件。这里是一个简单的示例:
```javascript
// 首先确保引入了jQuery库
$(document).ready(function() {
// 定义按钮元素
$('#cityButton').click(function() {
// 发送AJAX GET请求
$.ajax({
url: 'file:///C:/Users/42818/Desktop/china-city.json', // JSON文件路径
type: 'GET',
dataType: 'json', // 请求的数据类型是JSON
success: function(data) { // 请求成功时处理数据
var cities = data['河南省']; // 获取省份的地市信息
if (cities) {
// 将数据插入到div中
$('#provinceDiv').html('<ul>' + cities.map(function(city) {
return '<li>' + city + '</li>';
}).join('</ul>') || '<li>无数据</li>'; // 如果数组为空,则显示"无数据"
}
},
error: function(xhr, status, error) {
console.error('获取数据失败:', error);
}
});
});
});
```
在这个例子中,`#cityButton`是你的按钮ID,点击后会查询`china-city.json`中的河南省数据并将其显示在ID为`#provinceDiv`的`<div>`元素中。
阅读全文