第一步：
創(chuàng)建一個json文件，把假數(shù)據(jù)寫出來
{
? ? "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數(shù)據(jù)的標簽。
<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復(fù)選框按鈕 -->
? ? ? ? ? ? ? ? ? ? ? ? <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>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <!-- 商品數(shù)量增加 -->
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <div class="mui-numbox">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <!-- "-"按鈕，點擊可減小當前數(shù)值 -->
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <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}}"/>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <!-- "+"按鈕，點擊可增大當前數(shù)值 -->
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <button class="mui-btn mui-numbox-btn-plus xyn_plus" type="button">+</button>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? {{/each}}
? ? ? ? ? ? <!-- //]]> -->
? ? ? ? </script>
第五步：
連接json文件，并把json文件里面的內(nèi)容賦值到html頁面。接受json數(shù)據(jù)的標簽在第三步里，我這里用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("服務(wù)器發(fā)生錯誤");
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? })
