jquery调取json数据实现省市级联的方法

实现省市级联的方法需要以下步骤：

1. 准备数据：在服务器端准备好一个JSON文件，其中包含了省份和城市的信息。格式如下：

json
{
"北京市": ["东城区", "西城区", "朝阳区", "海淀区", "丰台区", "昌平区"],
"上海市": ["黄浦区", "卢湾区", "徐汇区", "长宁区", "静安区", "浦东新区"],
"广东省": ["广州市", "深圳市", "珠海市", "汕头市", "韶关市", "佛山市"],
"浙江省": ["杭州市", "宁波市", "温州市", "嘉兴市", "湖州市", "绍兴市"]
}

每个省份对应的城市数据是一个数组。这个JSON文件需要发布到服务器上，并保证可以通过网络访问。

1. 在HTML页面中添加相关代码：

```html

北京市上海市广东省浙江省

```

在HTML页面中添加了两个下拉框，分别用于选择省份和城市。引入jQuery库，并添加了一段JavaScript代码，在省份下拉框选择变化时，调用 loadData() 函数加载相应的城市信息。loadData() 函数通过调用jQuery库的getJSON()方法，从服务器端获取JSON数据，根据省份信息获取相应的城市数据，然后清空原有的城市下拉框并添加城市数据。

1. 注意事项：

2. 服务器端JSON文件如果与HTML页面不在同一服务器，需要在JSON数据文件的服务器端设置相应的CORS（跨域资源共享）规则，否则调用getJSON()方法时会失败。

3. 程序需要保证网络通畅，当网络出现故障时，调用getJSON()方法会失败，城市信息加载也会失败。

以下是两个示例说明：

1. 根据选择的省份，动态展示该省份下的城市列表。

HTML代码：

```html
省份：
北京市上海市广东省浙江省

城市：

```

JavaScript代码：

```javascript
$(document).ready(function() {
// 当省份下拉框选择变化时，调用 loadData() 函数加载相应城市信息
$("#province").change(function() {
var province = $(this).val();
loadData(province);
});
});

function loadData(province) {
// 根据省份信息调用服务器端JSON数据
$.getJSON("http://example.com/data.json", function(data) {
// 通过省份信息获取相应城市数据
var cities = data[province];
// 清空城市下拉框并添加城市数据
$("#city").empty();
$.each(cities, function(index, city) {
$("#city").append("" + city + "");
});
});
}
```

实现效果：选择北京市，则下拉框中会显示北京市的城区列表；选择广东省，则下拉框中会显示广东省所有的城市名。

1. 根据选择的省份和城市，动态展示该城市的地址。

HTML代码：

```html
省份：
北京市上海市广东省浙江省

城市：

地址：

```

JavaScript代码：

```javascript
$(document).ready(function() {
// 当省份下拉框选择变化时，调用 loadData() 函数加载相应城市信息
$("#province").change(function() {
var province = $(this).val();
loadData(province);
});
// 当城市下拉框选择变化时，调用 loadAddress() 函数加载相应地址信息
$("#city").change(function() {
var province = $("#province").val();
var city = $(this).val();
loadAddress(province, city);
});
});

function loadData(province) {
// 根据省份信息调用服务器端JSON数据
$.getJSON("http://example.com/data.json", function(data) {
// 通过省份信息获取相应城市数据
var cities = data[province];
// 清空城市下拉框并添加城市数据
$("#city").empty();
$.each(cities, function(index, city) {
$("#city").append("" + city + "");
});
// 加载城市下拉框的第一个值的地址信息
var firstCity = $("#city option:first-child").val();
loadAddress(province, firstCity);
});
}

function loadAddress(province, city) {
// 根据省份和城市信息调用服务器端JSON数据
$.getJSON("http://example.com/data.json", function(data) {
// 通过省份和城市信息获取相应地址
var address = data[province][city];
// 设置地址文本框的内容
$("#address").val(address);
});
}
```

实现效果：选择北京市和城区，则地址框中会显示该区的地址；选择广东省和珠海市，则地址框中会显示珠海市的地址。