文章目录
-
- 阅读本地城市数据
- 跨域错误。
- 1.鸡肋解决方案
- ajax的async设置
- 2.用jsonp解决方案(更好的解决方案)
-
- 核心代码：
- html源代码
- 将city.json变成city.js数据(加上createCity())
阅读本地城市数据
Access to XMLHttpRequest at ‘file:///C:/WebProject/bigProject/city.json’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https. 
跨域错误。
指的是两个 URL 相反，协议、域名和端口是一致的。 跨域的根本原因：非同源的 URL 资源互动。 网页：http://www.test.com/index.html 接口：http://www.api.com/userlist
1.鸡肋解决方案
新建谷歌浏览器的快捷方式：然后右击属性。 添加以下两者之一：
--user-data-dir="c:\ChromeDebug" --test-type --disable-web-security--allow-file-access-from-files阅读成功，但缺点是每次都要用这种快速打开的浏览器窗口进行调试。(如果给别人用，谁会有这个浏览器)
ajax的async设置
ajax中的async属性默认为true，即默认为异步请求。
async: true,(异步) 当ajax发送请求后，在等待服务器端回复的过程中，html会继续执行ajax请求后面的脚本，直到服务器端返回结果才执行success，即当ajax在执行请求之前，以后可能会执行请求等操作，以后可能会出现空值。async: false,（同步） 执行当前ajax代码块将停止执行后面的代码块JS代码，直到ajax执行完成后，可以继续执行以下内容JS代码。
let json; $.ajax({
url: "./city.json", type: "get", dataType: "json", async: false,全局变量必须同步json才不会undefined。 success: function (data) {
json = data; console.log(123) } }); 2.用jsonp解决方案(更好的解决方案)
主要是将json将数据文件转换成js文件类型。
核心代码：
<!-- 阅读城市数据 --> <script> let json; //声明全局变量json function creaeCity(data) {
//要 与city.js中同名createCity
json = data
}
</script>
//引入city.js
<script src="./city.js"></script>
html源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中国城市筛选</title>
<script src="./js/jquery.js"></script>
</head>
<body>
中国城市：
<div>
省份：<select class="st_css_province" id="st_id_province" onchange="st_province()"></select>
城市：<select class="st_css_city" id="st_id_city"></select>
</div>
<!-- 读取城市数据 -->
<script>
let json;
function createCity(data) {
json = data
}
</script>
<script src="./city.js"></script>
<!-- 前端界面 -->
<script>
let select = document.getElementById('st_id_province');
let city = document.getElementById('st_id_city');
let jsonobj = eval(json.provinces);
// 省份
let option = document.createElement('option');
option.value = "--------请选择：--------";
option.innerText = "--------请选择：--------";
select.appendChild(option);
for (i = 0; i < jsonobj.length; i++) {
let option = document.createElement('option');
let province = jsonobj[i].provinceName;
option.value = province;
option.innerText = province;
select.appendChild(option);
}
//城市
function st_province() {
let value = select.options[select.selectedIndex].value;
if (select.selectedIndex > 0) {
city.length = 0;
let option = document.createElement('option');
option.value = "--------请选择：--------";
option.innerText = "--------请选择：--------";
city.appendChild(option);
for (i = 0; i < jsonobj.length; i++) {
if (jsonobj[i].provinceName == value) {
if (jsonobj[i].citys.length > 0) {
for (citysvalue in jsonobj[i].citys) {
let cityname = jsonobj[i].citys[citysvalue].citysName;
let option = document.createElement('option');
option.value = cityname;
option.innerText = cityname;
city.appendChild(option);
}
}
}
}
}
}
</script>
</body>
</html>
将city.json变成city.js数据(加上createCity())
createCity({ "provinces": [ { "citys": [ { "citysName": "石家庄市" }, { "citysName": "邯郸市" }, { "citysName": "唐山市" }, { "citysName": "保定市" }, { "citysName": "秦皇岛市" }, { "citysName": "邢台市" }, { "citysName": "张家口市" }, { "citysName": "承德市" }, { "citysName": "沧州市" }, { "citysName": "廊坊市" }, { "citysName": "衡水市" }, { "citysName": "辛集市" }, { "citysName": "晋州市" }, { "citysName": "新乐市" }, { "citysName": "遵化市" }, { "citysName": "迁安市" }, { "citysName": "霸州市" }, { "citysName": "三河市" }, { "citysName": "定州市" }, { "citysName": "涿州市" }, { "citysName": "安国市" }, { "citysName": "高碑店市" }, { "citysName": "泊头市" }, { "citysName": "任丘市" }, { "citysName": "黄骅市" }, { "citysName": "河间市" }, { "citysName": "冀州市" }, { "citysName": "深州市" }, { "citysName": "南宫市" }, { "citysName": "沙河市" }, { "citysName": "武安市" } ], "provinceName": "河北省" }, { "citys": [ { "citysName": "太原市" }, { "citysName": "大同市" }, { "citysName": "朔州市" }, { "citysName": "阳泉市" }, { "citysName": "长治市" }, { "citysName": "晋城市" }, { "citysName": "忻州市" }, { "citysName": "吕梁市" }, { "citysName": "晋中市" }, { "citysName": "临汾市" }, { "citysName": "运城市" }, { "citysName": "古交市" }, { "citysName": "潞城市" }, { "citysName": "高平市" }, { "citysName": "原平市" }, { "citysName": "孝义市" }, { "citysName": "汾阳市" }, { "citysName": "介休市" }, { "citysName": "侯马市" }, { "citysName": "霍州市" }, { "citysName": "永济市" }, { "citysName": "河津市" } ], "provinceName": "山西省" }, { "citys": [ { "citysName": "呼和浩特市" }, { "citysName": "包头市" }, { "citysName": "乌海市" }, { "citysName": "赤峰市" }, { "citysName": "呼伦贝尔市" }, { "citysName": "通辽市" }, { "citysName": "乌兰察布市" }, { "citysName": "鄂尔多斯市" }, { "citysName": "巴彦淖尔市" }, { "citysName": "满洲里市" }, { "citysName": "扎兰屯市" }, { "citysName": "牙克石市" }, { "citysName": "根河市" }, { "citysName": "额尔古纳市" }, { "citysName": "乌兰浩特市" }, { "citysName": "阿尔山市" }, { "citysName": "霍林郭勒市" }, { "citysName": "锡林浩特市" }, { "citysName": "二连浩特市" }, { "citysName": "丰镇市" } ], "provinceName": "内蒙古自治区" }, { "citys": [ { "citysName": "沈阳市" }, { "citysName": "大连市" }, { "citysName": "朝阳市" }, { "citysName": "阜新市" }, { "citysName": "铁岭市" }, { "citysName": "抚顺市" }, { "citysName": "本溪市" }, { "citysName": "辽阳市" }, { "citysName": "鞍山市" }, { "citysName": "丹东市" }, { "citysName": "营口市" }, { "citysName": "盘锦市" }, { "citysName": "锦州市" }, { "citysName": "葫芦岛市" }, { "citysName": "新民市" }, { "citysName": "瓦房店市" }, { "citysName": "庄河市" }, { "citysName": "北票市" }, { "citysName": "凌源市" }, { "citysName": "调兵山市" }, { "citysName": "开原市" }, { "citysName": "灯塔市" }, { "citysName": "海城市" }, { "citysName": "凤城市" }, { "citysName": "东港市" }, { "citysName": "大石桥市" }, { "citysName": "盖州市" }, { "citysName": "凌海市" }, { "citysName": "北镇市" }, { "citysName": "兴城市" } ], "provinceName": "辽宁省" }, { "citys": [ { "citysName": "长春市" }, { "citysName": "吉林市" }, { "citysName": "白城市" }, { "citysName": "松原市" }, { "citysName": "四平市" }, { "citysName": "辽源市" }, { "citysName": "通化市" }, { "citysName": "白山市" }, { "citysName": "德惠市" }, { "citysName": "榆树市" }, { "citysName": "磐石市" }, { "citysName": "蛟河市" }, { "citysName": "桦甸市" }, { "citysName": "舒兰市" }, { "citysName": "洮南市" }, { "citysName": "大安市" }, { "citysName": "双辽市" }, { "citysName": "公主岭市" }, { "citysName": "梅河口市" }, {