如何将res.send object从前端发送到后端?

Question

我正试图与后端前端进行通信。目前，我有后端发送一个表达式到前端，前端计算它。从那里，我希望前端发送计算的答案返回到后端。

例如:后端发送"2+2="前端计算出2+2 = 4然后前端将答案4发送到后端后端记录答案4

前端

var XMLHttpRequest = require('xhr2');
const URL = "http://localhost:5000/"
let firstNumber = Math.floor(Math.random() * 10);
let secondNumber = Math.floor(Math.random() * 10);
const express = require('express');
const app = express();

// excecuting random addition
const finalExpression = firstNumber + "+" + secondNumber + "="
console.log(finalExpression);
var xhr = new XMLHttpRequest();
xhr.open("POST", URL, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
expression: finalExpression
}))

后端:

const express = require('express')
const app = express()
app.use(express.json())
app.post('/', (req, res) => {
console.log(req.body.expression);
arr = req.body.expression.split("")
console.log(parseInt(arr[0]) + parseInt(arr[2]))
// res.send(parseInt(arr[0]) + parseInt(arr[2]))
})
app.listen(5000, () => console.log())

如您所见，我在前端到后端尝试了res.send。

Answer 1

你似乎把事情弄混了。

1. 你不能在前端使用express-它是一个节点应用程序。您根本不需要在服务器上使用XMLHttpRequest。express将为您处理所有路由。

2. 您应该在前端使用fetch来获取/发送请求到服务器(我在这里使用async/await)。

它可能看起来更像这样。

服务器:

// Send an expression to the front-end
app.get('/getExpression', (req, res) => {
res.send(expression);
});
app.post('/postResult', (req, res) {
const result = res.body; 

// Calculate whether the result is correct,
// and then send the answer back
res.send(isResultCorrect);
});

客户:

// To get the expression from the server
const response = await fetch('/getExpression');
const expression = await response.text();
// To post the result back to the server
const options = { type: 'POST', body: result };
const response = await fetch('/postResult', options);
const isResultCorrect = await response.text();

Answer 2

您将前端和后端倒置:)前端发送XMLHTTPREQUEST，而服务器处理请求并返回响应。

也就是说，使用res.send是返回响应的正确解决方案。你在后台做了正确的事情。因此，您可以取消注释// res.send(parseInt(arr[0]) + parseInt(arr[2]))并保留后端代码。

在FRONTEND中缺少的是一个代码来监听和处理这个响应:

xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
console.log(xhr.response);
}
}

添加到var xhr = new XMLHttpRequest();之后

你的代码应该是这样的:

var xhr = new XMLHttpRequest();
// New code added here
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
// Handle the response (ex: console.log it)
console.log(xhr.response);
}
}
xhr.open("POST", URL, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({
expression: finalExpression
}))