模拟ajax请求数据并进行页面渲染

通过ajax请求数据后，进行页面渲染。

文件介绍

1.goods.json，用于模拟后台接口数据

{
	"cursor": 0,
	"size": 40,
	"page": 0,
	"result": [{
			"price": "1000",
			"name": "小米手机",
			"imgUrl": "img/1.png"
		},
		{
			"price": "2000",
			"name": "华为手机",
			"imgUrl": "img/1.png"
		},
		{
			"price": "3000",
			"name": "锤子手机",
			"imgUrl": "img/1.png"
		},
		{
			"price": "4000",
			"name": "一加手机",
			"imgUrl": "img/1.png"
		},
		{
			"price": "5000",
			"name": "魅族手机",
			"imgUrl": "img/1.png"
		},
		{
			"price": "6000",
			"name": "小米手机",
			"imgUrl": "img/1.png"
		},
		{
			"price": "7000",
			"name": "华为手机",
			"imgUrl": "img/1.png"
		},
		{
			"price": "8000",
			"name": "锤子手机",
			"imgUrl": "img/1.png"
		},
		{
			"price": "9899",
			"name": "一加手机",
			"imgUrl": "img/1.png"
		},
		{
			"price": "10099",
			"name": "魅族手机",
			"imgUrl": "img/1.png"
		},
		{
			"price": "20000",
			"name": "小米手机",
			"imgUrl": "img/1.png"
		},
		{
			"price": "30000",
			"name": "华为手机",
			"imgUrl": "img/1.png"
		},
		{
			"price": "40000",
			"name": "锤子手机",
			"imgUrl": "img/1.png"
		},
		{
			"price": "50899",
			"name": "一加手机",
			"imgUrl": "img/1.png"
		},
		{
			"price": "60099",
			"name": "魅族手机",
			"imgUrl": "img/1.png"
		}
	],
	"hasnext": 100
}

 

2.html，用于显示页面内容。

 

3.注意事项

该实例中仅仅有index.html文件，goods.json文件，和一张图片，其中ajax中的url指定json文件的路径（不能写错）。

4.效果如下

 温馨提示

更多前端博客，请关注公众号：xssy5431

扫码如下：