ajax 动态渲染页面

动态创建方法一：通过创建和添加节点实现

 

$.ajax({  

    url:'data/zhuye-nav.json',  

    success:function(data){  

          //获取数据成功后动态添加到页面中  

          var aImg = data.result;  

          for(i=0;i<aImg.length;i++){  

                var Li='<li><a href="#/list"><img src='+aImg[i].img+'/></a></li>'  

                $('.banner-c ul').append(Li);  

          }  

     }  

})  

 

 

---

 

动态创建方法二：字符串拼接

 

buildList();  view pla

function buildList(){  

       $.ajax({  

            url : 'data/zhuye-list.json',  

            success : function(data){

view plain co//判断，如果是字符串就先转成json再使用view placop

                 if(typeof(data) ==="string"){  

                        data = JSON.parse(data);  

                 }  

                      

                 var html = [ ];  

                 for(var i = 0 , len = data.result.length ; i < len ; i++){  

                        var item = data.result[i];  

                        html.push(renderItem(item));  

                 }  

                 $('#goods ul').html(html.join(''));   

             }  

       });  

 }  

这里定义要动态创建的代码模块，换行用\  ，这样写结构清晰，便于后期的维护和修改。

 view plain copy 

需要注意的是：下面的参数data实际就是上面的item，所以要直接写data.name,如果觉得别扭那可以把下面的形参给改一个就ok了。

view plaincopy 

function renderItem(data){  

      var str='<li>\  

               <span>'+data.name+'</span>\  

               <span>'+data.price+'</span>\  

          </li>';  

     return str;  

}

 

 

---

 

动态创建方法三：使用baidutemplate实现（推荐）

 

他其实是个JS模板引擎，去官网下载这个js文件，灰常灰常轻量级。

view plain copy 

1、在html页面中需要写如下的代码

 

也就是我们要动态创建的代码块，在这里我们把他当做是一个模板来使用，注意这里的写法：

一个是变量，另外一个是所有的js代码块都要用分隔符包起来，

变量分隔符格式：<%= 这里是变量 %>

js代码分隔符的格式：<%  这里是js代码  %>  

 view plain copy 

<section id="main">  

     <ul>  

           <!--数据通过动态添加-->  

           <!--使用下面创建的模板-->  

    </ul>  

</section>  

 

<!--在这里创建一个模板块-->  

<script id="list_tpl" type="text/html">  

        <%for(var i=0,len = result.length;i<len;i++){%>  

            <li>  

               <a href="#/detail"><img src="<%= result[i].img %>"/></a>  

                <div>  

                    <p><%= result[i].name %></p>  

                    <span><%= result[i].price %></span>  

                </div>  

            </li>  

         <%}%>  

</script>  

 view plain copy 

2、js文件中的代码这样写  

view plain copy 

buildListBT();  

          

function buildListBT(){  

          $.ajax({  

                url:'data/liebiao-list.json',  

                success:function(data){  

                    var html = baidu.template('list_tpl',data);  

                    $('#main ul').html(html);  

                }  

         })

  }  

 http://mp.weixin.qq.com/s?srcid=0401G3C3Mc4f72fS8e8S2TXP&scene=23&mid=2247483697&sn=2da27918286dc4f82987619988da5282&idx=1&__biz=MzIwMzI2NTAyOQ%3D%3D&chksm=96d3445ba1a4cd4d2aac776257c1df55c3cc0ed2c959f21be6d78c9ca6cd661620199a2aaacc&mpshare=1#rd