前端原生js实现的ajax解析json文件，快来看看吧

 

 以上是代码效果

---

知识点：js实现

1. 克隆节点：cloneNode 删除子节点：remove

2. 算法 - 临时变量存储当前对象

3. 改变类名的方式实现按键效果

4. ajax解析json文件，填充数据

---

html代码

<!--杰哥学习之路@初级-->
<div class="mainbiglistbox" >

			<div class="mainbiglistbox2" > 
			
			<div class="buttonarr" >
				<div class="part2navbox">
					<ul class="part2nav" >
						<li ><div id="shoujibutton"  class="shoujidiv">手机</div></li>
						<li ><div id="erjibutton">耳机</div> </li>
						<li ><div id="computerbutton">电脑</div> </li>
						<li ><div id="camerabutton">数码相机</div> </li>
						<li ><div id="watchbutton">手表</div> </li>
						<li ><div id="soundbutton">音响</div> </li>
					</ul>
				</div>
				
				<div class="ajaxbox" >
				<ul  class="flink" >
					<li onclick="changejsp()"><img src="img/0.jpg" width="250px" height="200px"/><p></p><p style="color: red;">123</p></li>
					</ul>
				</div>
			</div>
			
			
			</div>
		</div>

---

css代码

<style type="text/css">
	/*杰哥学习之路@初级*/
.mainbiglistbox {
	width: 100%;
	height: 750px;
}
.mainbiglistbox2 {
	width: 1200px;
	height: 780px;
	margin-left: 151px;
	position: relative;
	/* background-color: red; */
}
.buttonarr {
	width: 1170px;
	height: 700px;
	position: absolute;
	top: 20px;
	right: 40px;
	background-color: black;
	border: 1px solid aqua;
	list-style: none;
	border-radius: 0px 0px 30px  30px;
}

.part2nav {
	list-style: none;
}
.part2nav li{
	width: 200px;
	height: 30px;
	color: black;
    font-weight: bolder;
	text-align: center;
	line-height: 30px;
	background-color: aqua;
    border-right: 1px solid black;
	/* border-right: 1px solid white; */
	border-top: solid 1px aqua;
	box-shadow: 2px 0px 0px 0px rgb(0, 0, 0.5);
	/* background-color: red; */
	float: left;
}

/* 第一个孩子 */
.part2nav li:nth-child(1),.shoujidiv{
	border-radius: 20px 0px 0px 20px;
	border-left: 1px solid aqua;
}
/* 最后一个孩子 */
.part2nav li:last-child {
	border-radius: 0px 20px 20px 0px;
}
.part2nav li:hover {
	border-top: 1px solid aqua;
	color: aqua;
	background-color: black;

}
.buttonarr li {
	width: 100px;
	float: left;
}
.ajaxbox {
	width: 1250px;
	height: 700px;
	float: left;
}

.flink {
	list-style: none;
	width: 1250px;
	height: 700px;
}
.flink li {
	width: 250px;
	color: white;
	text-align: center;
	float: left;
	margin-left: 20px;
	/* border-right: 1px solid white; */

}
.part2navbox {
	width: 1050px;
	height: 30px;
	margin-top: 40px;
	margin-left: 40px;
	/* background-color: red; */
}
.flink li:hover {
	filter: brightness(130%);
	background-color: gray;
}
/* ------头的------ *//* ----改变样式 */
.headchangecolor {
	border-radius: 20px 0px 0px 20px;
	border-left: 1px solid aqua;
	color: aqua;
	background-color: black;
	border-top: 1px solid aqua;
}
/* --------尾的----- */
.endchangecolor {
	border-radius: 0px 20px 20px 0px;
	border-left: 1px solid aqua;
	color: aqua;
	background-color: black;
	border-top: 1px solid aqua;
}
/* -------横的-------- */
.changecolor2{
	border-left: 1px solid aqua;
	color: aqua;
	background-color: black;
	border-top: 1px solid aqua;
}

</style>

---

js代码：

			<script>
            //杰哥学习之路@初级

            ajax("flink","datas.json");
			
			// ajax("miaoshaul","jianhuo.json");
			
			function remove(){
				var flink=document.getElementsByClassName("flink")[0];
				while(flink.childElementCount!=1){
					flink.removeChild(flink.firstElementChild);
				}
			}
			
			function changecolor1(obj){
				obj.style.color="aqua";
				obj.style.backgroundColor="black";
				obj.style.borderTop="1px solid white";
			}
				// ajax("miaoshaul","jianhuo.json");
				
			

			
			//手机按钮，点击即可罗列手机的操作
			//思维：1.删除原有的数据，然后再用ajax解析json数据，进行克隆技术显示出来
			//  ----------1--------------
			var shoujibutton=document.getElementById("shoujibutton");
			shoujibutton.onclick=function(){
				shoujibutton.setAttribute('class','headchangecolor');
				getobj();
				// changecolor1(shoujibutton);
				remove();
				ajax("flink","phone.json");
				setobj(shoujibutton);
			}
			
			// ---------------借用临时存储,标识变色的按钮
			// !!!!必须初始化为0,代表空的意思
			var recordobj =0;
			function setobj(obj){
				recordobj = obj;
			}
			
			// --------------------
			// ------------改变class类名的方式进行变色
			function getobj(){
				//必须加入判断，如果不为空
				if(recordobj!=0){
					recordobj.setAttribute('class','');
				}
			}
			
			//  ----------2--------------
			var erjibutton=document.getElementById("erjibutton");
			erjibutton.onclick=function(){
				getobj();
				erjibutton.setAttribute('class','changecolor2');
				remove();
				ajax("flink","datas.json");
				setobj(erjibutton);
			}
			//  ----------3电脑--------------
			var computerbutton=document.getElementById("computerbutton");
			computerbutton.onclick=function(){
				getobj();
				remove();
				ajax("flink","computer.json");
				computerbutton.setAttribute('class','changecolor2');
				setobj(computerbutton);
			}
			//  ----------4相机--------------
			var camerabutton=document.getElementById("camerabutton");
			camerabutton.onclick=function(){
				getobj();
				remove();
				ajax("flink","camera.json");
				camerabutton.setAttribute('class','changecolor2');
				setobj(camerabutton);
			}
			//  ----------5手表--------------
			var watchbutton=document.getElementById("watchbutton");
			watchbutton.onclick=function(){
				getobj();
				remove();
				ajax("flink","watch.json");
				watchbutton.setAttribute('class','changecolor2');
				setobj(watchbutton);
			}
			//  ----------6--------------
			var soundbutton=document.getElementById("soundbutton");
			soundbutton.onclick=function(){
				getobj();
				remove();
				ajax("flink","sound.json");
				soundbutton.setAttribute('class','endchangecolor');
				setobj(soundbutton);
			}
			// --------------------
			//json对象必须是sites
			//字段为name src prices
			function ajax(ulclassname,jsonname){
				// firstimg.src="img/2.jpg";	
				//ajax解析json
				var xhr=new XMLHttpRequest();
				var flink=document.getElementsByClassName(ulclassname)[0];
				var li=flink.firstElementChild;
				xhr.open("GET",jsonname,true);
				xhr.send();
				xhr.onreadystatechange=function(){
					if(xhr.readyState==4&&xhr.status==200){
						var data=JSON.parse(xhr.responseText);
						// console.log(data);
					for(let i=0;i<data.sites.length;i++)	
						{
						 var cloneLi=li.cloneNode(true);  
						 flink.appendChild(cloneLi);  
						 var img=cloneLi.firstElementChild;
						 var p1=img.nextElementSibling;
						 var p2=p1.nextElementSibling;
						 // console.log(p1);
						 p1.innerHTML=data.sites[i].name;
						 p2.innerHTML=data.sites[i].price;
						 img.src=data.sites[i].src;
						}
						flink.removeChild(li);
					}
				}
			}
            </script>

---

json文件，注意数组名要sites，字段这些都必须要一致，剩下五个json文件就不罗列了，同理可得

• json文件名：datas.json，camera.json，computer.json，phone.json，sound.json，watch.json

{
    "sites": [
        {
            "name": "Air3苹果蓝牙耳机双耳" ,
            "src": "https://img14.360buyimg.com/n0/jfs/t1/33020/32/19142/82969/639a7cd6Ee01cf38a/a7e4d7d0b52652cf.jpg",
			"price":"￥ 229.00"
        },{
            "name": "华为 真无线蓝牙耳机" ,
            "src": "https://img14.360buyimg.com/n0/jfs/t1/138663/37/28849/44421/62f34bc3Eb85bb1ee/17327798976c975b.jpg",
			"price":"￥ 699.00"
        },{
            "name": "苹果蓝牙耳机无线二代" ,
            "src": "https://img14.360buyimg.com/n0/jfs/t1/213473/15/23350/51249/637c2b50Ee202bc9e/73f77b53fc1a221f.jpg",
			"price":"￥ 199.00"
        },{
            "name": "华为蓝牙耳机无线" ,
            "src": "https://img14.360buyimg.com/n0/jfs/t1/165224/29/32045/69851/63734e31Efc47bd54/73b6fd8ddc0c9b1f.jpg",
			"price":"￥ 219.00"
        },{
            "name": "小米Redmi Buds3青春版" ,
            "src": "https://img14.360buyimg.com/n0/jfs/t1/204000/30/24880/539552/62d137ecE476792ca/0f3dfffb6faccea1.jpg",
			"price":"￥ 99.00"
        },{
            "name": "真无线半入耳式蓝牙耳机" ,
            "src": "https://img14.360buyimg.com/n0/jfs/t1/211243/23/29076/55953/6398264dE2d1042c6/7f852724ccc3f43b.jpg",
			"price":"￥ 138.00"
        },{
            "name": " OKSJ 【华强北5代降噪】蓝牙耳机" ,
            "src": "https://img14.360buyimg.com/n0/jfs/t1/106302/28/26286/52444/63846ce7Eb565b2c9/89f70f796a4a8f3a.jpg",
			"price":"￥ 159.00"
        },{
            "name": "【高音质榜】Linklike 蓝牙耳机" ,
            "src": "https://img14.360buyimg.com/n0/jfs/t1/357/40/19087/114996/6391b6b7E520016d1/b7364a678e7d8aea.jpg",
			"price":"￥ 398.00"
        }
        
    ]
}

ajax解析json代码 || 编程程度：入门