laytpl模板——怎么使用ajax与数据交互

Posted 2020-10-04

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