前后端的数据交互以及懒加载

使用方法

引用jquery和jquery.lazyload.js到你的页面

<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.lazyload.js?v=1.9.1"></script>

需要先获取后台数据

在js文件里面写入

// An highlighted block
$(function(){
 $.ajax({
	type:'get',  //get post put delete
	url:'http://127.0.0.1.3333/home',//需要获取数据的地址
	dataType:'json', //返回值的类型
	success:function(data){  //成功的状态 data返回成功的数据
		console.log(data)；
		},
	error:function(error){  //失败的状态
		console.log(error)
}
});
})

数据展示

// An highlighted block
$(function(){
 $.ajax({
	type:'get',  //get post put delete
	url:'http://127.0.0.1.3333/home',//需要获取数据的地址
	dataType:'json', //返回值的类型
	success:function(data){  //成功的状态 data返回成功的数据
		console.log(data)；
		//ES6 模块字符串
		$.each(data,function(index,item){ //将数组循环展示
			$(".index-main ul"),.append(~<li class="lists">
			<img data-original="$item.product_img_url}"
			src="img/loading.gif" width="150" height="150">
			<label>
			<b class="discount">${item.product_uprice}</b>
			<span class="prince-text">${item.product_price}</span>
			</label>
			</li>~)
	});
	//懒加载
	$（“.index-main ul img”）.lazyload(
	effect : "fadeIn"//图片展示的效果
	);
	},
	error:function(error){  //失败的状态
		console.log(error)
}
});
})