模拟服务端传过来的数据如何显示在页面中

模拟服务端传过来的数据如何显示在页面中

1. 我们假设一个买水果网页上有一栏目是显示今天的热销水果的
2. 假设这里显示三个热销水果，最后的结果如下

3. 当然上面的图片，文字都是假设服务端数据库取来的，我们把他先是出来
4. 首先就是框架的布局（假设是这样的，大家还可以更加美化一点）

5. 下来我们就把数据传过去（下面假设是我们接收过来的数据并已将字符串转化成json数据)

	//从服务端拿来的数据
	var fruitsData = {
		"fruits":[
        	{
            	"fruitsName":"苹果",
            	"picture":"img/苹果.jpg", //模拟服务端图片存储的地址
            	"price":"10/kg"
        	},
        	{
            	"fruitsName":"橙子",
            	"picture":"img/橙子.jpg",
            	"price":"15/kg"
        	},
        	{
            	"fruitsName":"草莓",
            	"picture":"img/草莓.jpg",
            	"price":"20/kg"
        	}
    	]
	}

6. 有数据了，我们就需要把数据显示到页面中去，首先我先把我的html和css展示出来

	<div class="show_area">
		<ul class="fruits_name">
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<ul class="fruits_picture">
			<li>
				<img src="" alt="">
			</li>
			<li>
				<img src="" alt="">
			</li>
			<li>
				<img src="" alt="">
			</li>
		</ul>
		<ul class="price">
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>

	*{
		margin:0;
		padding:0;
	}
	ul{
		list-style-type:none;
	}
	div.show_area{
		width:100%;
		height:200px;
	}
	div.show_area ul.fruits_name,
	div.show_area ul.fruits_picture,
	div.show_area ul.price{
		display:flex;
		justify-content:flex-start;
	}
	div.show_area ul.fruits_name li,
	div.show_area ul.fruits_picture li,
	div.show_area ul.price li{
		width:150px;
	}
	div.show_area ul.fruits_name li,
	div.show_area ul.price li{
		height:25px;
		border:1px solid #ddaa22;
		text-align:center;
	}
	div.show_area ul.fruits_picture li{
		height:150px;
		border:1px solid #ffaa55;
	}
	div.show_area ul.fruits_picture li img{
		width:100%;
		height:100%;
	}

7. 这里使用原生js先获取一下结构，我们需要获取的是要展示的ul区域使用双重for循环把数据和li标签对应起来，从而把数据传入的li标签中，从而显示数据即可

		var fruitsName = document.getElementsByClassName('fruits_name')[0],
			fruitsPicture = document.getElementsByClassName('fruits_picture')[0],
			prices = document.getElementsByClassName('price')[0],
			nameLi = fruitsName.getElementsByTagName('li'),
			imgLi = fruitsPicture.getElementsByTagName('li'),
			priceLi = prices.getElementsByTagName('li');
		function fruitsDataShow(fruitsData){
			var  len = nameLi.length,
				 fImg = [];
			for(var i = 0; i < len; i++){
				fImg.push(imgLi[i].getElementsByTagName('img')[0]);
				for(var j = i; j <= i; j++){
					nameLi[i].innerHTML = fruitsData.fruits[j].fruitsName;
					fImg[i].setAttribute('src',fruitsData.fruits[j].picture);
					priceLi[i].innerHTML = fruitsData.fruits[j].price;
				}
			}	
		}
		fruitsDataShow(fruitsData);

8. 最后，给大家介绍一个可以在线解析JSON数据的网站JSON在线解析