获取 JSON 不在站点中工作但在本地主机中工作

Question

Json 抓取之前在网站上工作过，例如在这里我使用了相同的流程 - https://n-ce.github.io/Sea-arch

这是脚本

//FETCH
function content(a){
fetch(a+'.json').then(function (response) {
      return response.json();
    }).then(function (data) {
      appendData(data);
    }).catch(function (err) {
      console.log('error: ' + err);
    });
}

//Loading the objects
var root = document.getElementById('root');
function appendData(data) {
  for (var i = 0; i < data.length; i++) {
    var p = document.createElement("p");
    p.innerHTML = data[i].Name;
    root.appendChild(p);
  } 
}


// Remove Function

function remove(){
  while (root.hasChildNodes()) {
    root.removeChild(root.firstChild);
  }
}

// Click decision making

var count = couns = 0;

function Sites() {
  if(count%2==0){
    content('Sites');
    count++;
  }
  else{
    count--;
    remove();
  }
}
function Animals() {
  if (couns % 2 == 0) {
    content('Animals');
    couns++;
  }
  else {
    couns--;
    remove();
  }
}

这是 HTML


<!DOCTYPE html>
<html lang="en" >
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON SD</title>
    <link rel="stylesheet" href="style.css"/>
  </head>
  <body onload="content('Onload')">
    <span>
      <button onclick="Animals()">Load Animals</button>
      <button onclick="Sites()">Load Sites</button>
    </span>
    <div id="root"></div>
    <script src="script.js"></script>
  </body>
</html>

我没有办法调试它，因为它在本地主机上工作正常，所以控制台不会抛出任何错误。我对 Fetch 相当陌生 API 但是我在想，也许是因为 json 文件传输时间太长了？有人可以突出显示问题所在吗？

Answer 1

这是 github 页面的工作方式，感谢@programmarRaj 突出显示脚本

//FETCH
function content(a){
fetch("./"+a+".json").then(function (response) {
      return response.json();
    }).then(function (data) {
      appendData(data);
    }).catch(function (err) {
      console.log('error: ' + err);
    });
}

获取 JSON 不在站点中工作但在本地主机中工作

Fetching JSON not working in site but working in localhost

html

javascript

database

json

fetch-api