获取 JSON 不能在站点中工作，但在 localhost 中工作答案

【问题标题】：Fetching JSON not working in site but working in localhost获取 JSON 不能在站点中工作，但在 localhost 中工作
【发布时间】：2021-11-14 07:58:50
【问题描述】：

Json fetching 以前在站点中工作过，例如在这里我使用相同的过程 - 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>

鉴于控制台在 localhost 中工作正常，因此我无法调试此问题。我对 Fetch API 相当陌生，但是我想也许是因为正在传输的 json 文件花费了太长时间？有人可以强调一下是什么问题吗？

【问题讨论】：

请在此处发布minimal reproducible example，而不仅仅是作为存储库的链接（当您找到解决方案时可能会更新）。
你不能只转储一个指向整个 repo 的链接并“处理它，伙计们，我会等”。您希望我们克隆您的存储库，检查您的所有代码，在没有更多说明的情况下重现问题，调试您的应用程序，找到罪魁祸首并提供修复？不，谢谢:)
not working 不是对问题的有用描述。
对不起，我对 s.o. 还很陌生，我已经更新了这个问题，以包含有关该问题的更多详细信息。
我认为它有不同的结果，因为您在 github 上的链接不是/，而是/Sea-arch。这解释了为什么 fetch('Animals.json') 不起作用。应该是fetch('./Animals.json')?

标签： javascript html json database fetch-api

【解决方案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);
    });
}

【讨论】：