JSON 获取并显示在 html 页面上答案

【问题标题】：JSON get and show on html pageJSON 获取并显示在 html 页面上
【发布时间】：2017-06-04 21:05:54
【问题描述】：

我正在制作一个网络应用程序，我需要从 JSON 文件中获取数据并以表格的形式打印出来。问题是我收到 404 错误，JSON 文件（实际上我在本地工作并在做 Node.js）。

编辑 1：
在查看网络选项卡时，我看到了 404 错误。 JSON 文件位于 text/file.json 中， index.ejs 位于 views/index.ejs 中。所以我的问题是我在尝试获取 JSON 文件时无法获取任何数据（找不到它）。

该应用位于使用 node.js 和 express 制作的本地服务器上。

我的文件树

文本/allfiles.json
公开/
路由/index.js
views/index.ejs
app.js

这是我的文件： index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
    $(function() {
        $.getJSON("/text/global_summary.json", function(data) {
            console.log("JSON Data opened");
            $.each(data, function(i, field) {
                var tblRow = "<tr>" + "<td>" + field.topic + "</td>" +
                    "<td>" + field.page + "</td>"
                $(tblRow).appendTo("#userdata tbody");
            });

        });
    });
</script>
.
.
.
<div class="container">
  <table id= "userdata" border="2">
    <thead>
    <tr>
      <th data-field="id">Topic</th>
      <th data-field="name">Page</th>
    </tr>
    </thead>

    <tbody>
    </tbody>
  </table>
</div>

我的 json 文件

  [{"topic": "INTRODUCTION", "page": 8}, {"topic": "THE UNIVERSE", "page": 10}]

谢谢。

【问题讨论】：

您是否尝试在浏览器中按 f12 并查看网络选项卡？
相对于 json 文件的索引文件在哪里？
问题是什么？
您是否也通过 node.js 提供 json 文件？这很可能是服务器端错误，因此我们需要有关您的服务器设置的详细信息（您似乎表明这是运行 node.js 的本地计算机，这很好，但没有我们的服务器端代码）只看到等式的一半。
@ChristopherPeart 在查看网络选项卡时看到 404 错误。 JSON 文件位于 text/file.json 中， index.ejs 位于 views/index.ejs 中。所以我的问题是我在尝试获取 JSON 文件时无法获取任何数据（找不到）。

标签： javascript jquery json node.js

【解决方案1】：

看起来问题在于您实际上并未提供 json 文件。当您的代码调用$.getJSON("/text/global_summary.json"...); 时，浏览器不会神奇地知道从哪里获取文件，它会要求您的服务器发送该文件。你的服务器也不知道，所以它只是说“错误 404”，意思是“我不知道”。

因此，您必须告诉您的服务器如何提供该静态文件。由于您使用的是快递，这真的很容易。只需添加

app.use('/text', express.static('text'))

到您的 app.js 文件，并且任何时候您的服务器收到对任何“/text/somefile.extension”的请求，它都会尝试在您的文本文件夹中找到它。这里有一个关于如何以这种方式提供文件的非常好的概要：https://expressjs.com/en/starter/static-files.html。

【讨论】：

【解决方案2】：

我会检查您是否可以通过将其 url 直接放入浏览器 url 窗口来查看/下载 json 文件。

如果这不起作用（404 强烈建议这样做），您的快速应用程序没有提供 json 文件，您必须添加静态文件提供或为 json 文件添加路由。

另外：您的应用程序是否托管在网络服务器的根目录中？因为以 / 开头的 url 指向网络服务器根目录下的文件。

【讨论】：

【解决方案3】：

尝试在你的 head 标签中添加一个碱基：

<base href="http://localhost/" target="_blank">

如果您仍然遇到 404，请在此处发布请求标头。

【讨论】：