模拟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.效果如下