使用纯js将数据从node.js发送到前端答案

【问题标题】：Send data from node.js to frontend using pure js使用纯js将数据从node.js发送到前端
【发布时间】：2020-07-02 11:30:45
【问题描述】：

我正在尝试将带有数据的对象从 Node.js 服务器发送到 js 文件（以便在前端使用此数据）。

在 main.js 文件中，我正在操作 DOM。我提出以下要求：

let dataName = [];
let request = async ('http://localhost:3000/') => {
    const response = await fetch(url);
    const data = await response.json();
    dataName = data.name;
}

let name = document.getElementById('name');
name.textContent = dataName;

然后在文件 server.js 我有一个对象：

data = [
    {
        "id": 1,
        "name": "Jhon"
    },
    {
        "id": 2,
        "name": "Mike"
    }
];

我想将它作为 json 字符串（或其他方式）发送到 main.js 作为对我请求的响应。

问题：我的数据显示在浏览器的窗口中。我怎么能得到它作为回应？

我试过了

let express = require('express');
let app = express();
app.use(express.static(`main`));
app.get('/', function(req, res){
    res.json(data); //also tried to do it through .send, but there data only on window in browser
});
app.listen(3000);

有人能告诉我要在我的代码中进行哪些更改或指出我在谷歌上的方向吗？（我不想使用模板引擎）。

请帮帮我 :) 愿你平安。

【问题讨论】：

标签： javascript node.js ajax express dom

【解决方案1】：

我认为您正在尝试在同一 URL / 上提供前端和 JSON 数据。

你需要调整你的服务器代码如下：

let express = require('express');
let app = express();
app.use(express.static(`main`));
app.get('/api', function(req, res){
    res.json(data); //also tried to do it through .send, but there data only on window in browser
});
app.listen(3000);

现在您的数据将以 JSON 格式从/api 提供。然后你可以在前端发出如下请求：

let dataName = [];
let request = async () => {
    const response = await fetch('http://localhost:3000/api');
    const data = await response.json();
    dataName = data.name;
}

let name = document.getElementById('name');
name.textContent = dataName;

还有一个问题是url 没有被正确定义为参数。我调整了函数以在正确的位置简单地使用 URL 字符串。

【讨论】：

非常感谢！我在同一个 URL 上提供了 server 和 index.html :) 现在我遇到了另一个问题，但我想我可以自己解决它。也感谢您纠正我的英语（这不是我的母语:)))。
@Alexx 太棒了！不用担心，我更正了 + 添加了格式，以便更容易阅读，以防有人有同样的问题并稍后从谷歌来到这里。欢迎来到stackoverflow！

【解决方案2】：

您可以创建一个可以使用 REST API

进行通信的服务器

（假设数据是一个字符串）

客户：

let data = getSomeDataYouWantToSend()
fetch('/send', {
    method: 'POST',
    headers: {
      'Content-Type': 'text/plain'
    },
    body: data
})

假设您在/main 目录中有静态文件，在/views 目录中有html 文件

服务器：

let express = require('express')
let app = express()

app.use(express.static(`${__dirname}/main`))
app.set('views', `${__dirname}/views`)

app.get('/', (req, res) => {
    res.render('index.html')
})

app.post('/send', (req, res) => {
    console.log(req.body) // <- here is your data sent from client frontend
})

app.listen(3000)

【讨论】：