JQ getJSON获取数据

demo.js

[ 
	{ 
		"name":"吴者然", 
		"sex":"男", 
		"email":"[email protected]" 
	}, 
	{ 
		"name":"吴中者", 
		"sex":"男", 
		"email":"[email protected]" 
	}, 
	{ 
		"name":"何开", 
		"sex":"女", 
		"email":"[email protected]" 
	} 
]

demo.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>getJSON获取数据</title>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<style type="text/css">
#divframe {
	border: 1px solid #999;
	width: 500px;
	margin: 0 auto;
}
.loadTitle {
	background: #CCC;
	height: 30px;
}
</style>
<script type="text/javascript"> 
$(function(){ 
	$("#btn").click(function(){ 
		$.getJSON("js/demo.js",function(data){ 
			var $jsontip = $("#jsonTip"); 
			var strHtml = "123";//存储数据的变量 
			$jsontip.empty();//清空内容 
			$.each(data,function(infoIndex,info){ 
				strHtml += "姓名:"+info["name"]+"<br>"; 
				strHtml += "性别:"+info["sex"]+"<br>"; 
				strHtml += "邮箱:"+info["email"]+"<br>"; 
				strHtml += "<hr>" 
			}) 
			$jsontip.html(strHtml);//显示处理后的数据 
		}) 
	})
}) 
</script>
</head>
<body>
<div id="divframe">
    <div class="loadTitle">
        <input type="button" value="获取数据" id="btn"/>
    </div>
    <div id="jsonTip"> </div>
</div>
</body>
</html>

效果图:
JQ getJSON获取数据
 

把 JSON 的后缀名改为 JS,放在 WEB 容器中则可以正常读取。但是为何呢?知道的朋友请在下面留言。

相关推荐