jQuery ajax读取json文件内容

最新推荐文章于 2025-05-17 16:01:34 发布

xxyy888

最新推荐文章于 2025-05-17 16:01:34 发布

阅读量2.8w

点赞数 5

CC 4.0 BY-SA版权

分类专栏： WEB前端设计

本文链接：https://blog.csdn.net/xxyy888/article/details/8575469

WEB前端设计专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用JavaScript加载并解析JSON数据的实例。通过AJAX请求获取JSON文件，利用jQuery实现数据加载，然后遍历数据并在网页上展示。

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

json文件：

[
	{"name":"哈哈··","email":"邮箱01","gender":"男","hobby":["上网","打球"]},
	{"name":"呵呵··","email":"邮箱02","gender":"男","hobby":["网购","打球"]}
]

js代码：

<script type="text/javascript">
$(document).ready(function() {
    $.ajax({
		//请求方式为get
		type:"GET",
		//json文件位置
		url:"user.json",
		//返回数据格式为json
		dataType: "json",
		//请求成功完成后要执行的方法
		success: function(data){
			//使用$.each方法遍历返回的数据date,插入到id为#result中
			$.each(data,function(i,item){
				var content=item.name+","+item.email+","+item.gender+
","+item.hobby[0]+","+item.hobby[1]+"</br>";
				$("#result").append(content);
			})
		}
	})
});
</script>