请求本地的json文件_IT-Aurora_请求本地json文件

网络投稿 02-07 1699

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