JSON获取并在html页面上显示

Question

我正在创建一个Web应用程序，我需要从JSON文件中获取数据并以表格的形式打印它们。 问题是我得到了404错误，JSON文件（实际上我在本地工作并做了一个Node.js）。

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

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

我的文件树

文/ allfiles.json
上市/
路线/ index.js
意见/ 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}]

谢谢。

Answer 1

尝试在头标记中添加基础：

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

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

Answer 2

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

如果这不起作用（404强烈暗示这一点），您的快递应用程序不提供json文件，您必须添加静态文件提供或为json文件添加路由。

另外：您的应用是否托管在网络服务器的根目录下？ 因为在网络服务器的根目录下以/地址文件开头的网址。

Answer 3

看起来问题是你实际上并没有提供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 。

JSON获取并在html页面上显示

问题描述

3 个解决方案

解决方案1
0 2017-01-20 01:14:38

解决方案2
0 2017-01-20 01:28:29

解决方案3
0 已采纳 2017-01-20 02:58:18

JSON获取并在html页面上显示

问题描述

3 个解决方案

解决方案1 0 2017-01-20 01:14:38

解决方案2 0 2017-01-20 01:28:29

解决方案3 0 已采纳 2017-01-20 02:58:18

解决方案1
0 2017-01-20 01:14:38

解决方案2
0 2017-01-20 01:28:29

解决方案3
0 已采纳 2017-01-20 02:58:18