JQ getJSON获取数据

最新推荐文章于 2022-08-16 10:30:57 发布

iteye_17658

最新推荐文章于 2022-08-16 10:30:57 发布

阅读量123

点赞数

CC 4.0 BY-SA版权

分类专栏：境-JS 文章标签： javascript json ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_17658/article/details/82651350

境-JS 专栏收录该内容

197 篇文章

订阅专栏

本文介绍如何使用jQuery从JavaScript文件中获取JSON数据，并将其转换为HTML元素进行展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

demo.js

[ 
	{ 
		"name":"吴者然", 
		"sex":"男", 
		"email":"demo1@123.com" 
	}, 
	{ 
		"name":"吴中者", 
		"sex":"男", 
		"email":"demo2@123.com" 
	}, 
	{ 
		"name":"何开", 
		"sex":"女", 
		"email":"demo3@123.com" 
	} 
]

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>

效果图：