前端获取JSON数据显示在页面上

     从后台获取数据显示在界面上是前端开发所必须要掌握的一项基本技能，简单记录一下从本地模拟数据的JSON文件中获取数据显示在界面上。

1.先创建本地json文件，命名为data.json,json文件存储数据格式如下：

{
			"list":[
		{
			"project_img":"images/Home-logo1-hua.png",
			"project_name":"111",
			"money_range":"2000~40000",
			"day_rate":"0.04",
			"day_limit":"7-90",
			"day_person":"1400"	
			
		},
		{
			"project_img":"images/Home-logo2-bao.png",			
			"project_name":"222",
			"money_range":"2000~40000",
			"day_rate":"0.04",
			"day_limit":"7-90",
			"day_person":"1"
			
		}
		]
}

2.在js中写方法，并且调用方法。插入数据的时候innerHTNML方法为JavaScript原生的方法，但这个方法是向div中插入HTML代码，而不是追加，要想追加，每次需要保存之前的html内容。append方法为jquery的方法，可以实现直接向div中追加。

notice();

function notice(){
$.ajax("Json/data.json",{
		data:{},
		dataType:'json',
		type:'get',
		async:'false',
		success:function(data){			
			var listdata=data.list;       //列表数据				         
            if(listdata.length>0){   //项目列表
            	var listInfo="";          
				$.each(listdata,function(){
					listInfo+="<li class='mui-table-view-cell mui-media'>"+
											"<img class='mui-media-object mui-pull-left project-img' src="+this.project_img+">"+
											"<div class='mui-media-body'>"+
												"<h3 class='project-name'>"+this.project_name+"</h3>"+
												"<p class='money-range' class='mui-ellipsis loan-range'>"+this.money_range+"</p>"+
												"<p class='loan-rate'>每日百分比"+this.day_rate+"%，应该为"+this.day_limit+"天，"+this.day_person+"人已交"+"</p>"+
											"</div>"+
											"<div class='loan-more'>"+
												"<a href="+this.button_info+" target='' ><button>详情</button></a>"+
											"</div>"+										
										"</li>";
				});
			
			    $("#project_list")[0].innerHTML=listInfo;	
            }
		}
//		error:function(xhr,type,errorThrown){			
//			alert("系统繁忙，请联系管理员");
//		}
	})
}