如何使用Html读取本地json文件并以文本展示在页面中呢
时间: 2024-03-14 16:45:41 浏览: 117
在html中显示JSON数据的方法
可以使用Ajax来读取本地的JSON文件,并将数据展示在HTML页面中。以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>读取本地JSON文件</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$.ajax({
url: "data.json",
dataType: "json",
success: function(data){
var text = JSON.stringify(data);
$("#my-text").text(text);
}
});
});
</script>
</head>
<body>
<div id="my-text"></div>
</body>
</html>
```
在上面的代码中,使用了jQuery库来简化Ajax请求。首先,我们在`<head>`标签中引入jQuery库。然后,在`$(document).ready()`函数中,使用`$.ajax()`方法来读取`data.json`文件。`success`回调函数会在请求成功后执行,将JSON数据转换为字符串并将其显示在页面中。在页面中,我们使用`<div>`标签来展示JSON数据。
需要注意的是,为了能够成功读取本地的JSON文件,需要将HTML文件和JSON文件放在同一个文件夹中,并且在浏览器中直接打开HTML文件。如果在本地使用`file://`协议打开HTML文件,可能会出现跨域访问的问题。
阅读全文