国家统计局2020年6月30日最新省/市/县三级json数据(不包含港澳台)

国家统计局2020年最新省/市/县json数据(不包含港澳台)

国家统计局相应网址:国家统计局2020年全国统计用区划代码和城乡划分代码

因为不会python,所以我是一个一个网址去用js爬出来的。这样有点low。。。不过我觉得js爬数据的话应该是有更好的方法的,但是我想不出了,还请大佬勿喷。
我把各级数据的获取的相关js代码放到文章末尾了,有需要的可以看一下,多多交流。有啥写的不好的地方烦请各位指点一二。

全部数据

因为全部展示出来之后页面加载很慢,所以我上传到了网盘里了,大家自提吧。

链接:https://pan.baidu.com/s/13Nnzg7DpUwUV75R9I3dx_w
提取码:2020

数据说明

[
  {
    "n": "北京市", // 最外层的 `n` 是省级名称
    "c": [ // 市级数据(部分省份的下属只有一个市级,比如北京、天津...)
      {
        "v": "110100000000", // 第二层的 `v` 是市级代码编号
        "n": "市辖区", // 第二层的 `n` 是市级名称
        "c": [ // 县级数据
          {
            "v": "110101000000", // 第三层的 `v` 是县级编号
            "n": "东城区" // 第三层的 `n` 是县级名称
          },
          {
            "v": "110102000000",
            "n": "西城区"
          },
          ... // 最内层也就是县级数据。是一行省略号(...)
        ]
      }
    ]
  },
  {
    "n": "河北省",
    "c": [
      {
        "v": "130100000000",
        "n": "石家庄市",
        "c": [
          {
            "v": "130101000000",
            "n": "市辖区"
          },
          ...
        ]
      },
      {
        "v": "130200000000",
        "n": "唐山市",
        "c": [
          {
            "v": "130201000000",
            "n": "市辖区"
          },
          ...
        ]
      },
      ... // 第二层也就是市级数据。是两行省略号(...)
      ...
    ]
  },
  ... // 最外层也就是省级数据。是三行省略号(...)
  ...
  ...
]

获取省级数据

http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/2020/

// 在上述页面下的浏览器控制台输入后获取省级数据
let provinces = document.getElementsByClassName('provincetr');
let val = [];
for(let i = 0; i< provinces.length; i++){
    for(let j = 0; j < provinces[i].children.length; j++) {
        val.push({
            "n": provinces[i].children[j].children[0].innerText.slice(0, -1), // 省份名称
            "c": [] // 市级数据的集合
        });
    }
}
val.pop(); // 删除页面上最后一个为空的元素
window.localStorage['val'] = JSON.stringify(val); // 存到localStorage中,方便一会拿取
console.log(window.localStorage['val']);
/*	数据样式:

[
    {"n":"北京市","c":[]},
    {"n":"天津市","c":[]},
    {"n":"河北省","c":[]},
    {"n":"山西省","c":[]},
    {"n":"内蒙古自治区","c":[]},
    {"n":"辽宁省","c":[]},
    {"n":"吉林省","c":[]},
    {"n":"黑龙江省","c":[]},
    {"n":"上海市","c":[]},
    {"n":"江苏省","c":[]},
    {"n":"浙江省","c":[]},
    {"n":"安徽省","c":[]},
    {"n":"福建省","c":[]},
    {"n":"江西省","c":[]},
    {"n":"山东省","c":[]},
    {"n":"河南省","c":[]},
    {"n":"湖北省","c":[]},
    {"n":"湖南省","c":[]},
    {"n":"广东省","c":[]},
    {"n":"广西壮族自治区","c":[]},
    {"n":"海南省","c":[]},
    {"n":"重庆市","c":[]},
    {"n":"四川省","c":[]},
    {"n":"贵州省","c":[]},
    {"n":"云南省","c":[]},
    {"n":"西藏自治区","c":[]},
    {"n":"陕西省","c":[]},
    {"n":"甘肃省","c":[]},
    {"n":"青海省","c":[]},
    {"n":"宁夏回族自治区","c":[]},
    {"n":"新疆维吾尔自治区","c":[]}
]

*/

获取市级数据

/* 
	在获取各级别数据时尽量按顺序来,以防漏放错放
	
	每换一个省之后都需要把:
		return el.n === 'XXX' 中的XXX替换成新的省份名。
	ex:获取完北京市的市级数据后,在获取天津市的时候需要修改XXX为 `天津市` 这一省份名称
*/

// 以北京市为例
let val = JSON.parse(window.localStorage['val']);
let index = val.findIndex((el) => {
    return el.n === '北京市'; // 省份名称
});
val[index].c = []; // 先进行清空以防重复添加
let cities = document.getElementsByClassName('citytr');
for(let i = 0; i < cities.length; i++){
    val[index].c.push({
        "v": cities[i].firstChild.children[0].innerText, // 市级代码
        "n": cities[i].lastChild.children[0].innerText, // 市级名称
        "c": [] // 县级数据集合
    });
}
window.localStorage['val'] = JSON.stringify(val); // 存到localStorage中,方便一会拿取
console.log(JSON.stringify(val));
/*	数据样式:

[{"n":"北京市","c":[{"v":"110100000000","n":"市辖区","c":[]}]},{"n":"天津市","c":[]},{"n":"河北省","c":[]},{"n":"山西省","c":[]},{"n":"内蒙古自治区","c":[]},{"n":"辽宁省","c":[]},{"n":"吉林省","c":[]},{"n":"黑龙江省","c":[]},{"n":"上海市","c":[]},{"n":"江苏省","c":[]},{"n":"浙江省","c":[]},{"n":"安徽省","c":[]},{"n":"福建省","c":[]},{"n":"江西省","c":[]},{"n":"山东省","c":[]},{"n":"河南省","c":[]},{"n":"湖北省","c":[]},{"n":"湖南省","c":[]},{"n":"广东省","c":[]},{"n":"广西壮族自治区","c":[]},{"n":"海南省","c":[]},{"n":"重庆市","c":[]},{"n":"四川省","c":[]},{"n":"贵州省","c":[]},{"n":"云南省","c":[]},{"n":"西藏自治区","c":[]},{"n":"陕西省","c":[]},{"n":"甘肃省","c":[]},{"n":"青海省","c":[]},{"n":"宁夏回族自治区","c":[]},{"n":"新疆维吾尔自治区","c":[]},{"n":"","c":[]}]

*/

获取县级数据

let val = JSON.parse(window.localStorage['val']); // 从localStorage中获取数据
let index1 = val.findIndex((el) => {
    return el.n === 'XXX'; // 每换一个新的省之后都需要把 XXX 替换成新的省份名。
});
let urlIndex = Number(window.location.pathname.split('/')[6].split('.')[0]);
let index2 = 0;
for(let j in val[index1].c){ 
    if(val[index1].c[j].v.substring(0, 4) == urlIndex){	// 根据url末尾的值与localStorage中的市级的代码值 `v` 进行对比,相同则将序号赋值给index2
        index2 = j;
    }
}
val[index1].c[index2].c = [];
// 部分县级的class有变化,目前我发现的有这两种,应该是没其他的了,不过保不齐我可能眼花了一下。。。
let counties = document.getElementsByClassName('countytr').length == 0 ?  document.getElementsByClassName('towntr') : document.getElementsByClassName('countytr');
for(let i = 0; i < counties.length; i++){
    val[index1].c[index2].c.push({ // 部分县级名称为市辖区,是没有下级数据的,所以用三元表达式进行了一下判断,举例如下图
        "v": counties[i].firstChild.children[0] == undefined ? counties[i].firstChild.innerText : counties[i].firstChild.children[0].innerText,
        "n": counties[i].lastChild.children[0] == undefined ? counties[i].lastChild.innerText : counties[i].lastChild.children[0].innerText
    });
}
window.localStorage['val'] = JSON.stringify(val);
console.log(val);

在这里插入图片描述
然后就是一直选择新的地区反复执行相关代码,最终在localStorage中就会有所有的数据了。很繁琐,大家就当作参考好了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 可以通过以下步骤实现: 1. 创建一个HTML页面,包含三个下拉框,分别用于选择。 2. 在页面中引入jQuery库和一个用于获取JSON数据的ajax函数。 3. 创建一个JSON文件,命名为area.json,其中包含数据。 4. 使用ajax函数获取area.json文件中的数据,并将数据填充到三个下拉框中。 5. 给下拉框绑定一个change事件,当下拉框的值改变时,根据的值获取对应的数据,并将数据填充到下拉框中。 6. 给下拉框绑定一个change事件,当下拉框的值改变时,根据的值获取对应的数据,并将数据填充到下拉框中。 7. 最后,根据用户选择的的值,进行相应的操作。 以上就是使用ajax获取area.json数据实现市县三级联动选择的步骤。 ### 回答2: ajax 是一种基于 HTTP 请求异步传输数据的技术,可以用来获取后台返回的数据并动态显示在页面上,这样可以极大地提高用户的体验。本篇文章将介绍如何使用 ajax 获取 area.json 数据,并实现市县三级联动选择功能。 首先,我们需要准备一个 area.json 文件,该文件包含三级的地域数据,如下所示: ```json { "provinceList": [ { "id": 110000, "name": "北京", "cityList": [ { "id": 110100, "name": "北京辖区", "areaList": [ { "id": 110101, "name": "东城区" }, { "id": 110102, "name": "西城区" } ] } ] } ] } ``` 接下来,我们需要在 HTML 页面中添加三个下拉框,分别用于显示的选择结果,代码如下: ```html <div> <label>份:</label> <select id="province"></select> </div> <div> <label>城:</label> <select id="city"></select> </div> <div> <label>/区:</label> <select id="area"></select> </div> ``` 请注意,上述代码中给每个下拉框添加了一个 id 属性,这便于我们在 JavaScript 中访问这些元素。 接下来,我们需要编写 JavaScript 代码,使用 ajax 技术获取 area.json 文件并解析其中的数据,最终生成市县三级联动选择菜单。具体代码如下: ```javascript var province = document.getElementById("province"); var city = document.getElementById("city"); var area = document.getElementById("area"); // 使用 ajax 获取 area.json 文件 var xhr = new XMLHttpRequest(); xhr.open("GET", "area.json", true); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { // 解析 json 数据 var data = JSON.parse(xhr.responseText); var provinceList = data.provinceList; // 生成份下拉菜单 for (var i = 0; i < provinceList.length; i++) { var option = document.createElement("option"); option.value = provinceList[i].id; option.innerHTML = provinceList[i].name; province.appendChild(option); } // 生成城下拉菜单 province.onchange = function () { var provinceId = province.value; var cityList = null; for (var i = 0; i < provinceList.length; i++) { if (provinceList[i].id == provinceId) { cityList = provinceList[i].cityList; break; } } city.innerHTML = "<option value=''>请选择城</option>"; area.innerHTML = "<option value=''>请选择/区</option>"; for (var i = 0; i < cityList.length; i++) { var option = document.createElement("option"); option.value = cityList[i].id; option.innerHTML = cityList[i].name; city.appendChild(option); } }; // 生成/区下拉菜单 city.onchange = function () { var cityId = city.value; var areaList = null; for (var i = 0; i < provinceList.length; i++) { var cityList = provinceList[i].cityList; for (var j = 0; j < cityList.length; j++) { if (cityList[j].id == cityId) { areaList = cityList[j].areaList; break; } } if (areaList != null) { break; } } area.innerHTML = "<option value=''>请选择/区</option>"; for (var i = 0; i < areaList.length; i++) { var option = document.createElement("option"); option.value = areaList[i].id; option.innerHTML = areaList[i].name; area.appendChild(option); } }; } }; xhr.send(); ``` 上述代码中,我们先定义了三个变量 province、city、area,它们分别用于缓存 HTML 页面中的市县下拉框元素。 然后,我们使用 XHR 对象发送 GET 请求,获取 area.json 文件中的数据。其中,onreadystatechange 事件用于在 readyState 和 status 发生变化时执行相应的回调函数。 当获取到数据时,我们解析 json 数据,并生成份下拉菜单。同时,为份下拉菜单注册一个 onchange 事件,用于生成城下拉菜单。 在城下拉菜单中同样注册 onchange 事件,用于生成/区下拉菜单。 最后,我们使用 createElement 方法生成选项元素,并使用 appendChild 方法添加到相应的下拉框中。 这样,我们就完成了使用 ajax 技术获取 area.json 数据,并实现市县三级联动选择功能的代码编写。 ### 回答3: 在前端开发中,市县三级联动选择是比较常见的功能,通过ajax获取area.json数据可以实现这一功能。下面分为三个步骤进行讲解。 一、获取数据 在前端中使用ajax获取数据是比较常见的做法。可以使用jQuery库提供的$.ajax方法,从服务器端获取数据。在获取area.json数据的过程中,需要设置数据数据类型为json。以下是一个获取数据的示例: $(document).ready(function(){ $.ajax({ url:"area.json", dataType:"json", success:function(data){ //处理数据 } }); }); 二、处理数据 获取到数据后,我们需要对其进行处理,在jquery中可以使用$.each()方法对数据进行循环遍历,然后将其添加到HTML元素中去。 $(document).ready(function(){ $.ajax({ url:"area.json", dataType:"json", success:function(data){ $.each(data,function(index,province){ //处理数据 $.each(province.city,function(index,city){ //处理城数据 $.each(city.area,function(index,area){ //处理数据 }); }); }); } }); }); 三、显示数据 处理完数据后,最后一步就是将其显示在页面上了。可以通过jquery选择器选定需要显示数据的HTML元素,然后将数据添加到HTML中去。下面是一个简单的示例: $(document).ready(function(){ $.ajax({ url:"area.json", dataType:"json", success:function(data){ $.each(data,function(index,province){ //处理数据 var option=$('<option>'); option.attr('value',province.name); option.text(province.name); $('#province').append(option); $.each(province.city,function(index,city){ //处理城数据 var option=$('<option>'); option.attr('value',city.name); option.text(city.name); $('#city').append(option); $.each(city.area,function(index,area){ //处理数据 var option=$('<option>'); option.attr('value',area); option.text(area); $('#area').append(option); }); }); }); } }); }); 通过以上的三个步骤,就可以实现市县三级联动选择的功能。当用户选择不同的份时,就会根据份的不同,加载不同的城以及数据。这样的交互方式可以让用户更加直观地了解市县数据,也更加方便用户选择所需的城级。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值