Question

我正在尝试将JSON文件中的数据传输到HTML文件中，因此，在编辑数据时，我只能打开一个文件，而不是编辑20个单独的文件。

在这种情况下，经理的姓名和世界排名应该使用JSON文件中的数据显示在HTML页面上。例如，HTML页面应显示为：“经理：Corinne Diacre”，“世界排名：5”。

这可能吗？如果是这样，我该如何解决这个问题？

nations_women JSON文件：

{
  "france": [
    {
      "manager": "Corinne Diacre",
      "world-ranking": "5",
    }
  ],
  "england": [
    {
      "manager": "Phil Neville",
      "world-ranking": "2",
    }
  ]
}

france_women HTML文件：

    <div>
      <h1>France Women</h1>
      <p>Manager: *NAME HERE*</p>
      <p>World Ranking: *RANKING HERE*</p>
    </div>

我希望它在 NAME HERE 所在的位置显示为“ Corinne Diacre”，在 RANKING HERE 所在的位置显示为“ 5”。

非常感谢所有帮助！

Answer 1

先决条件：

安装NodeJS



安装this npm package使其成为用于提供本地文件的简单服务器

2018-04-02



导航至您的目录2017-12-12，即您的index.html所在的位置，然后打开命令提示符并键入以下命令。

npm install -g http-server



这样做会生成一个禁用了CORS的简单HTTP服务器。

进行异步调用以读取您的M:/Website文件，然后获取适当的DOM元素并替换其中的值。

在您的Javascript中：

http-server --cors=*

在您的HTML中：

nations_women.json

您的JSON文件：

window.onload = function() {

    const franceMgrEle = document.querySelector('#franceMgr');
    const franceRanking = document.querySelector('#franceRanking');

    function readLocalFile(callback) {
        const xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                const fileContents = JSON.parse(xhr.responseText);
                callback(fileContents);
            }
        };

        xhr.open("GET", "http://localhost:8080/nations_women.json", true);
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
        xhr.setRequestHeader('Access-Control-Allow-Credentials', 'true');
        xhr.send();
    }

    function SubstituteNames(data) {
        // Substitute the value here
        franceMgrEle.innerHTML = data.france[0]['manager'];
        franceRanking.innerHTML = data.france[0]["world-ranking"];
    }

    readLocalFile(SubstituteNames);
};

如何将JSON数据添加到HTML文件

1 个答案: