laytpl模板——怎么使用ajax與數據交互

　　第一次在項目中用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;　　
                      });
                    }                                                                                                                                           
                 }
             });
         }