如何将来自 POST 请求的 JSON 发送到客户端？答案

【问题标题】：How can I send the JSON coming from a POST request to the client?如何将来自 POST 请求的 JSON 发送到客户端？
【发布时间】：2019-04-05 14:06:40
【问题描述】：

我有一个运行 express 的节点服务器，它监听传入的请求。我正在渲染一个 HTML 文件，当我在我的服务器中收到一个 GET 请求时我想更新它。但是，当外部事件发生（异步）时，发送到我的服务器的数据是由 API 发送的。我不知道如何使用传入请求的 JSON 内容更新我提供的 HTML 文件。特别是，我正在尝试替换传入类的 inner.HTML 内容，正如您在我的代码中看到的那样。

我尝试在客户端使用 fetch API 向服务器发出请求以检索此数据，但它似乎不起作用。

服务器.js

const bodyParser = require('body-parser');
const port = 3000;

const app = express();
const server = app.listen(port, () => console.log('App listening on port ${port}'));

app.set('view engine', 'html');
app.engine('html', ejs.renderFile);

app.use(express.static(__dirname + '/public'));

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended:true}));



app.get (‘/incoming', (req,res)=>{

  const { status} = req.url;

  res.json(status);
  console.log(status);

}) ```

Client.js

fetch('http://localhost:3000/incoming').then(function(response) {
  return response.json();
}).then(response => {
  document.getElementById("dlr").innerHTML = response
}).catch(error => console.error(error))


index.html

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/css-layout/1.1.1/css-layout.js" />
  <title>Node SMS Texting</title>
</head>
<body>
  <div class="container">
    <h2>Text API</h2>
    <input type="sender" name="from" id="from" placeholder="Enter sender ID ...">
    <input type="button" id="button" value="Send Text" class="button button-primary">
    <p class="response"></p>
    <p class="incoming"></p>
  </div>

  <script src="js/client.js"></script>
</body>
</html> 

I get the result logged in the console as per my console.log in the server side, but the client doesn't receive anything. This is the console.log


/incoming?user=A&to=Me&code=21404&Id=150000001A01F77B&&timestamp=2019-04-08+15%3A57%3A15&timestamp=1554739095&nonce=59167e2f-654c-4dd5-b236-bff9ac97f917

The only thing I see happening on the client side is /incoming set as text  set under the incoming.innerhtml class, but not the content of the GET request sent to my server.

Any help here would be highly appreciated.

Thanks in advance.

Regards,
Javier

【问题讨论】：

标签： javascript node.js api express fetch

【解决方案1】：

您正在向 POST 端点发送 GET 请求。您可以通过在客户端的 fetch 中传递正文和方法来解决此问题。此外，您应该在响应返回时对其进行处理。将您的 fetch 重写为这样的内容。

fetch('http://localhost:3000/incoming', {
  method: 'post',
  body: JSON.stringify(body)
}).then(response => {
  document.getElementById("incoming").innerHTML = response
}).catch(error => console.error(error))

【讨论】：

嗨，Imre，非常感谢您在这里的快速回复。你说的完全有道理。但是，我不知道我需要在体内传递什么。我只需要从服务器接收传入的数据，所以我真的不需要向服务器传递任何东西。你能在这里阐明一下吗？问候，
嗨，Javilondo，在这种情况下，您在 express 中使用了错误的方法。通常，如果您想向服务器发送一些数据，例如要添加到数据库中的记录，则使用 POST。如果您只想检索数据，请使用 GET。所以更新你的快递应用到app.get。
嗨，Imre，感谢您回复我。确实，我都试过了，但似乎我无法访问客户端中的数据。让我更新上面的帖子，以便您可以看到我目前拥有的内容。
如果您在浏览器中访问localhost:3000/incoming。你看到你的数据了吗？
其实，没有。当我从服务器端记录数据时，我只会看到我的数据，即说到服务器。如果我去 localhost:3000/incoming 它被注册为另一个 GET 请求，但数据没有显示。当外部事件发生时，此数据来自外部 API。