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="#/lieBiao"><img src='+aImg[i].img+'/></a></li>'
	         $('.banner-c ul').append(Li);
	  }
       }
})

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

buildList();

function buildList(){
			
	        $.ajax({
	            url:'data/zhuye-list.json',
	            error:function(data){
	                alert(data);
	            },
	            success:function(data){</span>

//判断，如果是字符串就先转成json再使用；

 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('')); 
	            }
	       	 });
	    }
//这里定义要动态创建的代码模块，换行用\  ，这样写结构清晰，便于后期维护修改;

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

function renderItem(data){
                        var str='<li>\
			     <a href="#/lieBiao">\
				<img src="'+data.img+'" />\
				<div>\
				<span style="white-space:pre">	</span><p>'+data.name+'</p>\
					<span>'+data.jieshao+'</span>\
					<span>'+data.price+'</span>\
				</div>\
				<i></i>\
			     </a>\
			  </li>';
   return str;

</pre><pre code_snippet_id="1807280" snippet_file_name="blog_20160804_18_1168966" name="code" class="javascript">

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

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

1、在html页面中需要写如下的代码</strong></span><span style="font-size:24px;">，也就是我们要动态创建的代码块，在这里我们把他当<span style="font-family: Arial, Helvetica, sans-serif;">做是一个模板来使用，注意这里的写法：一个是，另</span></span>

外一个是所有的js代码块都要用分隔符包起来，分隔符的格式<%  这里是js代码    %>

<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="#/xiangQing"><img src="<%=result[i].img%>"/></a>
				<div>
					<p><%=result[i].name%></p>
					<span><%=result[i].price%></span>
				</div>
			</li>
		 <%}%>

<span style="white-space:pre">	</span></script>

</pre><pre code_snippet_id="1807280" snippet_file_name="blog_20160804_19_4996213" name="code" class="javascript">js文件中的代码这样写

buildListBT();
		
	function buildListBT(){
	        $.ajax({
	            url:'data/liebiao-list.json',
	            error:function(data){
	                alert(data);
	            },
	            success:function(data){
	                var html = baidu.template('list_tpl',data);
	                $('#main ul').html(html);
	            }
	        });
	    }

一定要弄明白这两个是怎么联系到一起去的，在ajax获取数据之后的success回调函数中通过baidu.template('list_tpl',data); 相当于是把获取来的data数据送到list_tpl中进行了一次加工过程，list_tpl就是我们在html页面中定义的那个模板块，然后再将结果赋值给了变量html，最后将其追加到ul中；

以上说的这三种方法用着都挺方便的，但是当我们要动态创建的对象比较复杂的时候

通过节点创建和追加的方式可能就比较麻烦了，搞不好思维会乱掉，使用下面的两种方法就能很好的结局这个问题，而且在后期代码的维护方面也可以节省不少时间；

好了，就说这么多吧，有问题就留言，有好的方法也请您不要吝啬哦。