laytpl模板——怎麼使用ajax與資料互動

標籤：turn   寫法   xxx   als   type   size   eal   json   data   

　　第一次在項目中用laytpl模板，下面是一些使用過程中的探索，希望對小夥伴們有所協助。

　　註：第一次使用這個模板的小夥伴建議先去看看官網　laytpl

<script type="text/html" id="productList-shop-main1">　　//模板內容都要存放在<script>標籤裡      {{# for (var i = 0; i < d.obj.length; i++){ }}　　//模板裡面的for迴圈跟js一樣的寫法，要寫在{{# }}這裡面            <div class="list-shop product-list-shop" data-id="{{d.obj[i].id}}">　　//模板內容裡面的資料要寫在2對大括弧裡面{{ d.資料 }}                              <div class="list-msg-2 productlist-img">　　　　　　　//模板裡面的資料前面都要加上d，沒有為什麼，文法就這樣                                    <a title="{{d.obj[i].fullName}}"><img src="{{d.obj[i].imgrealpath_45}}" class="shop-img" data-id="{{d.obj[i].id}}"/></a>                              </div>                              <div class="list-msg-3 productlist-msg-3">                                    <div class="list-main-1">                                          <div class="productlist-list-main-1-left list-main-1-left product-main-1-left">{{d.obj[i].fullName}}</div>                                    </div>                                    <div class="list-main-3">                                          <div class="list-main-3-left"><span>￥{{d.obj[i].price}}</span></div>                                          <div class="list-main-3-right">                                                <ul class="product-btn productlist-btn">                                                                        {{# if(d.obj[i].isFavorite == 1){ }}　　//if else也是js的寫法，也要寫在{{# }}裡面                                                      <li><img class="favorite-icon" src="webpage/weixin/wudeli-weixin/images/list01.png" data-value="{{d.obj[i].isFavorite}}" /></li>                                                      {{# }else{ }}　　//else也要寫在{{# }}                                                      <li><img class="favorite-icon" src="webpage/weixin/wudeli-weixin/images/list1.png" data-value="{{d.obj[i].isFavorite}}" /></li>                                                      {{# } }}　　//結束括弧也要寫在{{# }}                                                      <li><img class="index-car-icon" src="webpage/weixin/wudeli-weixin/images/car-chcked01.png" /></li>                                                      <li class="product-btn-buy productlist-btn-buy" "><button onclick="productBtn(this);">立即購買</button></li>                                                </ul>                                          </div>                                    </div>                              </div>            </div>      {{# } }}　　//for迴圈結束括弧也要單獨寫在這裡面{{# }}

</script>

 

　上面模板的內容就是紅色框的部分，使用了這個模板以後，就不用再拼字串了。

　　

 

　　下面總結了2種寫法：

　　第一種是模板裡面已經寫了迴圈（比如我上面的模板就已經寫了迴圈），ajax請求裡面就不需要在寫迴圈了，如：

　　

　　　　var gettpl = document.getElementById(‘productList-shop-main1‘).innerHTML;　
　　　　$.ajax({                 url: "orderController.do?findTdCodeNews",                  data: {                          "billCompanyName":billCompanyName                 　},                 type: "post",                 dataType:"json",                 success: function (e) {                   if (!e.success) {                          alert(e.msg);                          return false;                      }                                       laytpl(gettpl).render(e, function(html){　　//這裡的gettp1就是擷取到模板內容的id                          document.getElementById(‘item3-main‘).innerHTML = html;　　//把擷取到的模板內容添加到id為item3-main的容器裡面                      });                                                                                                                                                                                }             });         }

 

　　　

　　第二種是，模板裡面沒有寫迴圈，那麼就要在ajax請求裡面寫迴圈，如：

　　

　　　　var gettpl = document.getElementById(‘productList-shop-main1‘).innerHTML;　　
　　　　$.ajax({                 url: "orderController.do?findTdCodeNews",                  data: {                          "billCompanyName":billCompanyName                 　},                 type: "post",                 dataType:"json",                 success: function (e) {                   if (!e.success) {                          alert(e.msg);                          return false;                      }                   
　　　　　　　　　　　　　//xxx代表返回結果集的屬性名稱
　　　　　　　　　　　for(var i = 0; i < e.xxx.length; i++){                    laytpl(gettpl).render(xxx[i], function(html){　                          document.getElementById(‘item3-main‘).innerHTML = html;　　                      });                    }                                                                                                                                                            }             });         }

 

 

　　

laytpl模板——怎麼使用ajax與資料互動