ajax中的模板引擎

一.模板引擎

我们在使用ajax请求数据时，返回的如果是一个 JSON 格式的字符串，我们需要将其包装到对应的HTML代码中，
再添加到页面上，才能看到效果。
------渲染过程就是模板引擎

模板引擎的使用：

                使用方法：
                    1.引入
                    2.通过ajax获取数据，返回到前端
                    3.渲染数据，渲染页面
                     $.ajax({
                        url:'user.json',//请求地址
                        data:'',//发送的数据
                        type:'',//请求的方式
                        dataType:'json',//数据的类型
                        success:function (res) {
                            console.log(template('dvTemplate',{userInfo:res}));
                                ----传递html格式的数据
                            $('.uu').html(template('dvTemplate',{userInfo:res}));
                                ----渲染到页面

                        },// 请求成功执行的方法
                    
                        //将请求到的json数据渲染到 html页面，通过字符串创建的方法
                        <script type="text/template" id="dvTemplate">
                            <%  for(var i=0;i<user.length;i++){%>
                                <li>name:<% =user[i].name %> age:<% =user[i].age %> </li>
                            <%}%>

二.bootstrap中的使用模板引擎创建动态轮播图

旋转木马：轮播图；
          响应式的实现：
            官网中的代码，修改在class=item中，其中的<div class="carousel-caption">
            是对图片的解释文本、
                其中实现响应式的效果，可通过在pc端设置a标签，设置其背景图片，通过定位来使图片居中，原因为pc端中图片
            的宽度随页面宽度改变，但高度并不变，否则图片将会变形。移动端中通过img设置图片，图片
            的宽高随页面的宽高改变，即在 xs 中显示小图片，sm-md-lg中隐藏小图片；同理在xs中隐藏
            大图片
            
            渲染数据实现动态轮播图
                $.ajax({
                    url:'json数据',
                    data:'json',
                    success:function(){
                        //模板引擎
                        //轮播图的小圆点，图片
                        小圆点
                        var pointHtml=template('pointTemplate',{lunboList:data})/*添加模板引擎，则必须清除掉html页面中的小圆点代码*/
                        ...html('小圆点的变量')
                        图片
                        var .....
                        ...html('图片的变量')

                    }，
                    error:''
                })
                //小圆点的渲染
                 <script type="text/template" id="pointTemplate">
                    <%for(var i=0;i<lunboList.length;i++){%>
                        <li data-target="#carousel-example-generic" data-slide-to='<%=i%>' class='<%=i==0?'active':'%>'></li>
                    <%}%>
                //图片的渲染
                  <script type="text/template" id="imageTemplate">
                    <%for(var i=0;i<lunboList.length;i++){%>
                       <div class='item' <%=i==0?'active':''%>'>
                           <a href="#" class='pc_imgBox hidden-xs style="background-images:url(<%=lunboList[i].pcUrl%>)"'>
                           </a>
                            <a href="#" class='m_imgBox hidden-xs hideen-md hidden-sm '>
                                <img src="<%=lunboList[i].mUrl%>" alt="">
                            </a>
                        </div>
                    <%}%>

           优化：数据的缓存--可降低ajax请求的次数
                ---原理：请求成功时将请求的数据赋值给window，使之成为window中的一个属性，使下次不用再次请求数据，只需要请求一次即可
                        window.data=data;
                        再通过判断条件，如果已缓存数据，则缓存数据，否则进行缓存数据 window.data=data;
                图片的显示，可通过js中的判断条件来判断显示哪张图片，不用再代码中书写hidden-md等代码，这样页面中将加载更快和流畅