读取外部JSON文件，并遍历到指定的标签内

2019独角兽企业重金招聘Python工程师标准>>>

userinfo.json ，在代码做会被作为外部JSON载入。

[ 
	{ 
	"name":"张国立", 
	"sex":"男", 
	"email":"zhangguoli@123.com" 
	}, 
	{ 
	"name":"张铁林", 
	"sex":"男", 
	"email":"zhangtieli@123.com" 
	}, 
	{ 
	"name":"邓婕", 
	"sex":"女", 
	"email":"zhenjie@123.com" 
	} 
] 

JS如下： 

$(function(){ 
				$("#btn").click(function(){ 
						$.getJSON("userinfo.json",function(data){ 
							var well = $(".well"); 
							var strHtml = "";     //存储数据的变量 
							well.empty();       //清空内容 
							
//							不同于例遍 jQuery 对象的 $().each() 方法，
//							此方法可用于例遍任何对象。回调函数拥有两个参数：
//							第一个为对象的成员或数组的索引，
//							第二个为对应变量或内容。
//							如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。

							
							$.each(data,function(i,item){ 
								
								strHtml += "姓名："+item["name"]+"<br>"; 							
								strHtml += "性别："+item["sex"]+"<br>"; 
								strHtml += "邮箱："+item["email"]+"<br>";  //strHtml反复拿值
								strHtml += "<hr>" 
								//alert(strHtml)   //返回：姓名：张国立<br>性别：男<br>邮箱：zhangguoli@123.com<br><hr>
								//return false;
							}) 

						well.html(strHtml);//显示处理后的数据 
					})  //getJSON end
				}) 
			}) 

html

<input type="button" value="获取数据" id="btn"/> 
<div class="well"> </div> 

 

转载于:https://my.oschina.net/u/583531/blog/1486048