如何在Node.js服务器上向客户端Ajax请求提供JSON文本文件

时间:2019-05-16 17:22:36

标签: jquery node.js ajax

我正在aws ubuntu服务器上运行一个简单的node.js Web应用程序。我有一些来自api的json数据,这些数据已本地存储在ubuntu服务器上的文本文件data.json中。

我只是想通过AJAX调用从json文件中加载数据,并将其呈现在客户端html上。

这是我的项目目录结构:

    MyApp
      server.js
      index.html
      data.json

此客户端代码可在Webstorm和本地运行,但在我的实时服务器上返回错误(看起来它返回的是html错误文件而不是json,它解释了解析错误,但并不能解决如何获取此数据的问题)。

<script>
    $(document).ready(function(){
      $.ajax({
             url: "/data/data.json",
             method: "GET",
             dataType: "json",
             error: function() {
                  console.log("error");
             },
             success: function(data) {
                  console.log(data);
             }
        });
  });
</script>

我认为我需要从节点内部提供此json文件,以便可以从客户端发出HTTP GET请求,但不了解它们如何结合在一起。有人可以帮忙提供例子吗?

编辑:节点server.js代码:

var express = require('express');
var app = express();
var server = require('http').createServer(app);

var router = express.Router();

router.use(function (req, res, next) {
    console.log("/" + req.method);
    next();
});

router.get("/",function(req, res){
    res.sendFile(__dirname + "/index.html");
});

app.use("/",router);

app.use("*",function(req, res){
    res.sendFile(__dirname + "/index.html");
});

app.use('/data', express.static('public'));

server.listen(process.env.PORT || 3000);
console.log('Server is running on port 3000...');

1 个答案:

答案 0 :(得分:1)

我建议将*.json个文件放入子文件夹。比在服务器端提供对该文件夹的静态访问。

示例: 将所有*.json个文件放在./public文件夹中

// server.js
const express = require('express')
const app = express()

app.use('/data', express.static('public'))
...

客户端:

$.get( "/data/my-file.json", function( data ) {
  alert( "Data Loaded: " + data );
});