最終效果如圖

前端程式碼如下

<div class="track-rcol">             <divclass="track-list">                 <ul>                     <liclass="first">                         <iclass="node-icon"></i>                         <spanclass="time">2016-03-10 18:07:15</span>                         <spanclass="txt">感謝您在京東購物，歡迎您再次光臨！</span>                     </li>                     <li>                         <iclass="node-icon"></i>                         <spanclass="time">2016-03-10 18:07:15</span>                         <spanclass="txt">【京東到家】京東配送員【申國龍】已出發，聯絡電話【18410106883，感謝您的耐心等待，參加評價還能贏取京豆呦】</span>                     </li>                     <li>                         <iclass="node-icon"></i>                         <spanclass="time">2016-03-10 18:07:15</span>                         <spanclass="txt">感謝您在京東購物，歡迎您再次光臨！</span>                     </li>                     <li>                         <iclass="node-icon"></i>                         <spanclass="time">2016-03-10 18:07:15</span>                         <spanclass="txt">感謝您在京東購物，歡迎您再次光臨！</span>                     </li>                     <li>                         <iclass="node-icon"></i>                         <spanclass="time">2016-03-10 18:07:15</span>                         <spanclass="txt">感謝您在京東購物，歡迎您再次光臨！</span>                     </li>                     <li>                         <iclass="node-icon"></i>                         <spanclass="time">2016-03-10 18:07:15</span>                         <spanclass="txt">感謝您在京東購物，歡迎您再次光臨！</span>                     </li>                 </ul>             </div>         </div>
<style>             body{font-size:12px;}             ul li{list-style:none;}             .track-rcol{}             .track-list{margin:20px; padding-left:5px; position:relative;}             .track-list li{position:relative; padding:9px 0 0 25px; line-height:18px; border-left:1px solid #d9d9d9; color: #999;}             .track-list li.first{color:red; padding-top:0; border-left-color:#fff;}             .track-list li .node-icon{position:absolute; left:-6px; top: 50%; width: 11px; height: 11px; background: url(img/order-icons.png) -21px -72px no-repeat;}             .track-list li.first .node-icon{background-position:0-72px;}             .track-list li .time{margin-right:20px; position:relative; top:4px; display:inline-block; vertical-align:middle;}             .track-list li .txt{max-width:600px; position:relative; top:4px; display:inline-block; vertical-align:middle;}             .track-list li.first .time{margin-right:20px; }             .track-list li.first .txt{max-width:600px; }         </style>

用以上html和CSS來定義一個如下圖所示的物流資訊展示模組，大家也可以自己寫一個，

重頭還是在JS

js程式碼如下

var express = '#(express)';//後臺獲取物流json var obj = eval("(" +express + ")"); var deliver1 = `<li class="first"> <i class="node-icon"></i> <span class="time">` +obj.Traces[0].AcceptTime + `</span> <span class="txt">` +obj.Traces[0].AcceptStation +`</span> </li>`; $('.track-list ul').html(deliver1);//清空ul並新增最新一條物流資訊 for(vari = 1;i<obj.Traces.length;i++){ var deliver = `<li > <i class="node-icon"></i> <span class="time">` +obj.Traces[i].AcceptTime + `</span> <span class="txt">` +obj.Traces[i].AcceptStation +`</span> </li>`; $('.track-list ul').append(deliver);//新增之前的物流軌跡 }

此時從後臺獲取的json是字串格式，需要用eval來解析

為什麼要 eval這裡要新增 “("("+express+")");//”呢？ 

原因在於：eval本身的問題。 由於json是以”{}”的方式來開始以及結束的，在JS中，它會被當成一個語句塊來處理，所以必須強制性的將它轉換成一種表示式。 

解析出來後再用for方法動態生成並新增到頁面上就ok了