请求本地的json文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.root{
				width: 800px;
				margin: 30px auto;
				border: 2px solid gold;
			}
			ul{
				list-style: none;
				width: 100%;
				display: flex;
				flex-wrap: wrap;
/*				justify-content: space-between;
*/			}
			h3{
				width: 97%;
				height: 40px;
				line-height: 40px;
				padding-left: 3%;
			}
			li{
				width: 10%;
				height: 40px;
				line-height: 40px;
				text-align: center;
				overflow: hidden;
				/*怪异盒模型*/
				box-sizing: border-box;
				border:1px solid gold;
			}
		</style>
	</head>
	<body>
		<div class="root">
			
		</div>
	</body>
</html>

<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
	//1.声明请求对象
	var request;
	//2.获取的请求对象---兼容写法   null也是false
	if(window.XMLHttpRequest){
		request = new XMLHttpRequest();
	}else{
		//主要为了兼容IE浏览器
		request = new ActiveXObject("Microsoft.XMLHTTP");
	}
	//3.设置本地文件的请求地址   可以是网址(即网络请求)  也可以是本地文件地址,例如 .jpg .png .txt .json等文件  (即本地请求)
	//参数1:请求方式 默认GET,也可以是POST,具体看接口文档
	//参数2:地址
	//参数3:是否开启异步请求
	 request.open("GET", "city.json", true);
	 
	 request.onreadystatechange = function(){
	 	if(request.readyState == 4 && (request.status == 200)){
	 		//能执行此处 说明请求加载完毕  并且数据请求成功
	 		//就能获取数据啦!! request.responseText就是请求到的数据
//	 		console.log(request.responseText);
	 		getDataByJSONString(request.responseText);
	 		
	 	}
	 }
	 
	 //最后一步  发送
	 request.send();
	 
	 //----------------------------------------------------
	 //封装解析数据的方法 
	 function getDataByJSONString(jsonStr){
	 	//1.解析
	 	var bigObject = JSON.parse(jsonStr);
	 	//2.获取所有的key
	 	var allKeyArray = Object.keys(bigObject);
	   //3.对所有的key 做升序
	    allKeyArray.sort();
	    //4.遍历数组  得到每一个key  来获取大对象中key对应的数组
	    for(var i in allKeyArray){
	    	var k = allKeyArray[i];
	    	//然后取出字母对应的数组
	    	var cityArray = bigObject[k];
	    	
	    	//每次得到新的字母 就创建ul标签  
	    	var ul = document.createElement("ul");
	    	$(".root").append(ul);
	    	//创建h3
	    	var h3 = document.createElement("h3");
	    	$(h3).html(k);
	    	$(ul).append(h3);
	    	
	    	//循环城市数组  得到每一个城市对象
	    	for(var j in cityArray){
	    		var cityObj = cityArray[j];
	    		var li = document.createElement("li");
	    		$(li).html(cityObj.name);
	    		$(ul).append(li);
	    		
	    		
	    	}
	    }
	 	
	 	
	 	
	 }
	 
	
</script>

JQ
#JQ
请求本地的json文件
http://ultracode.cn/2021/01/09/JQ/请求本地的json文件/
作者
Win
发布于
2021年1月9日
许可协议