Ajax 找不到带有 node.js 的 json答案

【问题标题】：Ajax can't find json with node.jsAjax 找不到带有 node.js 的 json
【发布时间】：2017-07-16 15:01:04
【问题描述】：

所以我构建了一个小游戏（使用 p5.js 库）并希望实现从 JSON 文件加载的排行榜，用作一种数据库来存储用户名/分数，所有这些都使用 Node.js服务器，安装了 express 以使事情变得更容易。所以这里是html（带有ajax代码）：

<html>
<head>
  <title>KassBric - Mouetto</title>
  <meta charset="UTF-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.sound.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script language="javascript" type="text/javascript" src="sketch.js"></script>
  <script language="javascript" type="text/javascript" src="Paddle.js"></script>
  <script language="javascript" type="text/javascript" src="Ball.js"></script>
  <script language="javascript" type="text/javascript" src="Brick.js"></script>
  <script language="javascript" type="text/javascript" src="Grid.js"></script>
  <script language="javascript" type="text/javascript" src="Attractor.js"></script>
  <script language="javascript" type="text/javascript" src="methods.js"></script>
  <script language="javascript" type="text/javascript" src="Bonus.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script type="text/javascript">
      $.ajax({
          url: '/scores.json',
          dataType: 'json',
          success: function(data) {
              var keys = Object.keys(data);
              for(var i = 0; i < keys.length; i++) {
                var username = keys[i];
                var score = data[username];
                  var row = $('<tr><td>' + username + '</td><td>' + score + '</td></tr>');
                  $('#Leaderboard').append(row);
              }
          },
          error: function(jqXHR, textStatus, errorThrown){
              alert('Error: ' + textStatus + ' - ' + errorThrown);
          }
      });
      </script>
  </head>

  <body>
    <div>
      <p id="LeaderboardHolder" style = "background-color : rgb(51, 51, 51); color: rgb(150, 150, 150); padding: 15px;">
        <table id="Leaderboard">
          <tr>
            <th>Username</th>
            <th>Best Score</th>
          </tr>
        </table>
        </p>
    </div>
  </body>

</html>

这是我的 server.js：

console.log("server is starting");
var express = require('express');
var fs = require('fs');
var app = express();
var server = app.listen(3000, listen);
function listen() {
  console.log("Listening...");
};
app.use(express.static('public'));

var data = fs.readFileSync('scores.json');
var scores = JSON.parse(data);
console.log(scores);

app.get('/leaderboard', showLeaderboard);
function showLeaderboard(request, response){
  response.send(scores);
};

app.get('/leaderboard/add/:username/:score?', addPlayer);
function addPlayer(request, response){
  var data = request.params;
  var username = data.username;
  var score = Number(data.score);
  var type = typeof score;
  if(!score || type !== 'number'){
    var reply = "Score is required, and must be a number.";
  }else{
    scores[username] = score;
    var data = JSON.stringify(scores, null, 2);
    fs.writeFile('scores.json', data, finished);
    function finished(err){
      console.log("Updated the database.");
      var reply = {
        request: "Submitted",
        username: username,
        score: score
      };
    };
  };
  response.send(reply);
};

app.get('/leaderboard/:username', showPlayer);
function showPlayer(request, response){
  var word = request.params.username;
  if(scores[word]){
    var reply = {
      username: word,
      score: scores[word]
    };
  }else{
    var reply = {
      msg: "Username not found"
    };
  };
  response.send(reply);
};

我的目录看起来像：

-Project:
     -node_modules
     -public:
            -index.html (code above)
            -all my game files & folders
     -packages.json
     -scores.json
     -server.js

因此，在使用 Node/Express 运行时，我收到一个错误：

“GET http://localhost:3000/scores.json 404（未找到）”

通过进行更多测试，我尝试在我的项目目录（在公共文件夹中）运行“基本”python SimpleHTTPServer，但没有收到任何错误，ajax 获取数据并将其解析到 html 表中。我找不到为什么这适用于 python 的服务器而不是我的节点一......

【问题讨论】：

在 ajax 中尝试url: '../scores.json'（注意两个点）。
你的服务器代码在哪里？因为您可以在 Python 中使用它。这告诉我你没有 JavaScript/node.js 背景。
@wrangler 不会做任何事情。
@Darkrum 我编辑了帖子以添加 server.js 代码
和 @wrangler 即使使用 ../scores.json 它也不起作用，谢谢！

标签： javascript json node.js ajax p5.js

【解决方案1】：

您的 Ajax 网址 /scores.json，但您在 server.js 中没有到 /scores.json 的路由

在这种情况下，我的解决方案是：

$.ajax({
          url: '/handler',
          dataType: 'json',
          success: function(data) {
              var keys = Object.keys(data);
              for(var i = 0; i < keys.length; i++) {
                var username = keys[i];
                var score = data[username];
                  var row = $('<tr><td>' + username + '</td><td>' + score + '</td></tr>');
                  $('#Leaderboard').append(row);
              }
          },
          error: function(jqXHR, textStatus, errorThrown){
              alert('Error: ' + textStatus + ' - ' + errorThrown);
          }
      });

在 server.js 中：

app.get('/handler', function(req, res) {

    var filePath = path.join(__dirname, '/scores.json');

    var file = fs.readFileSync(filePath, 'utf8');

    var result = JSON.parse(file);

    res.send(result);

}

对不起我的英语。

【讨论】：

我以为是这样的，但我对 serverSide prog 有点陌生，并且不知道如何返回带有路由的文件（当然也不知道什么是处理程序以及如何建造一个...）你能链接一些我可以找到如何做到这一点的地方吗？谢谢:)