{
"name": "Tom","age": 25,"hometown": "Beijing"
}
接着在HTML文件中，我们需要使用Ajax从后端获取该JSON数据，并在页面上展示。具体实现如下：
<html>
<head>
<Meta charset="UTF-8">
<title>展示JSON数据</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="result"></div>
<script>
$(document).ready(function(){
$.ajax({
url: "example.json",type: "GET",dataType: "json",success: function(data){
var text = "<p>姓名：" + data.name + "</p>"
+ "<p>年龄：" + data.age + "</p>"
+ "<p>家乡：" + data.hometown + "</p>";
$("#result").html(text);
}
});
});
</script>
</body>
</html>
在上述代码中，我们首先引入了jQuery库，然后通过Ajax发送GET请求获取example.json文件。通过dataType指定我们希望获得JSON类型的数据。如果请求成功，我们就将JSON数据解析为文本，并将其使用jQuery的html()方法插入到id为"result"的div标签中。
最后，我们可以在浏览器中运行上述HTML文件，即可看到展示了从后端获取的JSON数据。
在以上示例中，我们演示了如何使用Ajax在页面上展示JSON数据。希望对大家有所帮助！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
