Question

我正在尝试将带有数据的对象从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);

有人可以告诉我代码中要进行哪些更改，或者向我指出Google的方向吗？（我不想使用模板引擎）。

请帮助我：)和平与你同在。

Answer 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);

现在，您的数据将以/api的JSON形式提供。然后，您可以在前端进行如下请求：

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字符串。

Answer 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)

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

2 个答案: