用假数据模拟API接口

创建一个json文件，把假数据写出来

{

    "data":[

            {

                "id":1,

                "price":11000.00,

                "num":1,

                "goods_name":"马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋",

                "picture":"/xiaoyunong/rest/api/products/1.jpg"

            },

            {

                "id":2,

                "price":800.00,

                "num":2,

                "goods_name":"马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋",

                "picture":"/xiaoyunong/rest/api/products/2.jpg"

            },

            {

                "id":3,

                "price":990.00,

                "num":1,

                "goods_name":"马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋",

                "picture":"/xiaoyunong/rest/api/products/7.jpg"

            },

            {

                "id":4,

                "price":10.00,

                "num":5,

                "goods_name":"马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋",

                "picture":"/xiaoyunong/rest/api/products/8.jpg"

            },

            {

                "id":4,

                "price":12400.00,

                "num":3,

                "goods_name":"马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋马克尔斯高板鞋",

                "picture":"/xiaoyunong/rest/api/products/9.jpg"

            }

        ]

}

引入文件模板引擎文件和jQuery文件，尺旅引在body标签后面就行了

在html页面写接受模板引擎和json数据的标签。

<div class="xyn_view">

            <!-- 订单列表 -->

            <div class="cart_order">

                <ul class="cart_ul">

                </ul>

            </div>

</div>

写模板引擎，在html页面写，记得给script标签加ID

<script type="text/html" id="mainTpl">

            <!-- //<![CDATA[ -->

            <!-- // 模板引擎 -->

            {{each data as value i}}

                <li>

                    <div class="cart_list">

                        <!-- mui复选框按钮 -->

                        <div class=" mui-checkbox cart_list_btn">

   宏困猜                         <label class="list_btn_label"></label>

                            <input name="checkbox1" value="Item 1" type="checkbox" />

                        </div>

                        <!-- 图片 -->

                        <div class="picture_wrap">

                   蔽型         <img class="cart_list_picture" src="{{value.picture}}" alt="" />

                        </div>

                        <!-- 商品描述信息 -->

                        <div class="cart_list_content">

                            <span class="yichu_wrap"><span class="yichu">{{value.goods_name}}</span>

                            </span>

                            <ul class="list_content_price">

                                <span class="priceL">￥{{value.price}}.00</span>

                                <!-- 商品数量增加 -->

                                <div class="mui-numbox">

                                    <!-- "-"按钮，点击可减小当前数值 -->

                                    <button class="mui-btn mui-numbox-btn-minus xyn_minus" type="button">-</button>

                                    <input class="mui-numbox-input xyn_num" type="number" value="{{value.num}}"/>

                                    <!-- "+"按钮，点击可增大当前数值 -->

                                    <button class="mui-btn mui-numbox-btn-plus xyn_plus" type="button">+</button>

                                </div>

                            </ul>

                        </div>

                    </div>

                </li>

            {{/each}}

            <!-- //]]>-->

        </script>

连接json文件，并把json文件里面的内容赋值到html页面。接受json数据的标签在第三步里，我这里用ul来接收。第五步写在js文件中，也可以写在html页面的script标签中

$(function() {

                  $.ajax({

                      type: 'get',

                      url: './cart.json',   

                      dataType: 'json',

                      success: function(data) {

                          console.log(data)

                            var html = template('mainTpl', data)

                            $('.cart_ul').html(html)

                        },

                        error: function(data) {

                            console.dir(data)

                            $("#info").html("服务器发生错误")

                        }

                    })

            })

1、首先在电脑的桌面上使用鼠标右键单击要进行打开的“json”格式的亏樱做文件，然后在d出的选项框内点销衡击“打开方式”选项。2、接着就会d出一个对话框，在此对话框内点击“记事本”选项。3、接着此时就文件就可以被打开了，在此文件的页面也可进行对此文颂闷件的相关编辑。

---