用js调用本地的json文件数据并且循环到HTML中显示

最新推荐文章于 2023-11-11 15:56:51 发布

陌上浮华

最新推荐文章于 2023-11-11 15:56:51 发布

阅读量2.1k

点赞数 3

文章标签： json nginx html

本文链接：https://blog.csdn.net/qq_37727216/article/details/120179068

版权

该博客介绍如何在HTML中使用JavaScript读取本地的JSON文件数据，并将数据循环显示到页面上。在Apache或nginx环境下运行网页，确保正确加载和解析数据。

摘要由CSDN通过智能技术生成

注意：一定要在Apache或者nginx环境下打开网页

HTML代码：

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<body>
<div id="demo"></div>
<div id="demo2"></div>
</body>
</html>

js代码：

<script>
  var xhttp = new XMLHttpRequest();
  xhttp.open("GET", "index.json", true);
  xhttp.send();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var json = this.responseText;
      var obj = JSON.parse(json);
      var i;
      var html="";
      var html1="";
      for (i=0;i<obj.length;i++) {
      html =html+'<p>'+obj[i].name+'</p>

最低0.47元/天解锁文章

陌上浮华

关注

3
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
用js调用本地的json文件数据并且循环到HTML中显示

注意：一定要在Apache或者nginx环境下打开网页HTML代码：<!DOCTYPE html><html><meta charset="UTF-8"><body><div id="demo"></div><div id="demo2"></div></body></html>js代码：<script> var xhttp = new.
复制链接

扫一扫