Ajax 无法通过 node.js 找到 json

Question

所以我构建了一个小游戏（使用 p5.js 库）并想实现一个从 JSON 文件加载的排行榜，用作一种数据库来存储 Username/score，所有这些都使用 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 (Not Found)"

并且通过做更多的测试，我尝试在我的项目目录（在 public 文件夹中）运行 a "basic" python SimpleHTTPServer 并且我没有得到任何错误,ajax获取数据并解析成htmltable。我无法找到为什么它适用于 python 的服务器而不适用于我的节点 1 ...

Answer 1

您的 Ajax url /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);

}

对不起我的英语。

Ajax 无法通过 node.js 找到 json

Ajax can't find json with node.js

javascript

json

node.js

ajax

p5.js