Question

我目前正在尝试将本地JSON文件（universities.json）中的数据显示到网页上的表格中。这是我当前的代码：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>

</head>
<body>
    <div id="id01"></div>

<script>
var xmlhttp = new XMLHttpRequest();
var url = "universities.json";

xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myArr = JSON.parse(this.responseText);
        myFunction(myArr);
    }
};
xmlhttp.open("GET", url, true);
xmlhttp.send();

function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
        out += '<a href="' + arr[i].url + '">' + 
        arr[i].display + '</a><br>';
    }
    document.getElementById("id01").innerHTML = out;
}
</script>
</body>
</html>

我在这里搜索了很多问题，并完成了无数的google搜索，但是我无法找到为什么这行不通。这只是代码的一次迭代。我也尝试了其他各种方法。我知道我没有为表添加任何代码，但是我删除了该代码，直到可以获取任何格式的数据为止。

任何帮助将不胜感激。谢谢

Answer 1

您的浏览器安全性不允许您发出此请求，并且您收到CORS错误，为了绕过此错误，您有两个以下选择。

1。更改浏览器安全设置。例如，在Chrome中，您可以执行以下操作：导航到Chrome安装文件夹并使用以下命令运行chrome，然后尝试在浏览器中再次进行测试

chrome.exe --allow-file-access-from-files

2。在本地运行Web服务器，并将所有文件放在同一路径中。

Answer 2

无法从codeandbox内提供文件。但是，下面的（服务器端）代码示例可以解决问题：

const http = require("http");

http
  .createServer((req, res) => {
    if (req.method === "GET" && req.url == "/") {
      res.writeHead(200, {
        "Content-Type": "text/html"
      });
      res.end(`<!DOCTYPE html>
        <html>
          <body>
            <div id="id01"></div>
          </body>
          <script>
            const getJson = () => {
              let xhr = new XMLHttpRequest();
              xhr.open('GET', '/getjson', true);
              xhr.onload = () => {
                if (xhr.readyState == 4 && xhr.status == 200)
                  json = JSON.parse(xhr.responseText);
                  jsons = [];
                  Object.values(json).forEach((value,index) => {
                    jsons.push('<a href="'+value+'">"'+Object.keys(json)[index]+'"</a>');
                  });
                  jsons.forEach(item => document.querySelector('#id01').innerHTML += item+'<br>');

              };
              xhr.send();
            };
            getJson();
          </script>
        </html>`);
    }
    if (req.method === "GET" && req.url.match(/getjson/)) {
      let json = `{ "Univ1": "https://univ1.edu", "Univ2": "https://univ2.edu", "Univ3": "https://univ3.edu" }`;
      res.writeHead(200, {
        "Content-Type": "application/json"
      });
      res.end(json);
    }
  })
  .listen(8080);

https://codesandbox.io/s/j2yj6577q3

Answer 3

CORS错误是由于Mahdi前面提到的浏览器安全性引起的。

如果您只是通过浏览器中的本地驱动器打开了HTML文件（仅客户端），并且未托管在本地或远程网络服务器上，而不是使用XMLHttpRequest（），应尝试从纯JavaScript使用FileReader（）。做这样的事情：

在网页上显示本地json文件中的数据

3 个答案: