<!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>

在这里插入图片描述

# 前端
Logo
魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

cover

全家桶集齐！Qwen3.5四款小模型上线魔乐社区，附昇腾全套实践教程

avatar 魔乐社区

Pont - 搭建前后端之桥：高效、灵活的接口管理工具

Pont 是一款强大的数据服务层解决方案，它能够帮助开发者快速搭建前后端之间的桥梁，实现接口的高效管理和代码自动生成。无论是新手还是有经验的开发者，都能通过 Pont 轻松处理接口文档、生成类型安全的 API 代码，从而显著提升开发效率。[![Pont 工具标志](https://raw.gitcode.com/gh_mirrors/po/pont/raw/3f1b7d4bbba3fd2dda

avatar 魔乐社区

如何快速上手 hvac：HashiCorp Vault Python 客户端零基础入门指南

**hvac** 是 HashiCorp Vault 的 Python 3.X 客户端库，专为开发者提供简单高效的 Vault 交互方式。无论你是需要管理密钥、配置身份验证，还是实现安全的秘密数据存储，hvac 都能帮助你轻松搞定 Vault 的各项操作。本文将带你零基础快速入门，从安装到基础操作，让你在几分钟内即可上手使用这个强大的工具。[![hvac 客户端 Logo](https://r

avatar 魔乐社区