如何将POST请求中的JSON发送给客户端？

Question

I have a node server running with express which listens to incoming requests. 我有一个运行Express的节点服务器，它监听传入的请求。 I am rendering an HTML file which I would like to update when I receive a GET request in my server. 我正在渲染一个HTML文件，当我在服务器中收到GET请求时，我想要更新该文件。 However, the data that is sent to my server is sent by an API when an external event happen (asynchronously). 但是，当外部事件发生时（异步），发送到我的服务器的数据由API发送。 I don't know how to update the HTML file I'm serving with the JSON content of the incoming request. 我不知道如何使用传入请求的JSON内容更新我正在服务的HTML文件。 Particularly, I am trying to replace the inner.HTML content of the incoming class as you can see in my code. 特别是，我正在尝试替换传入类的inner.HTML内容，就像我在代码中看到的那样。

I have tried to use the fetch API on the client side to make a request to the server to retrieve this data, but it doesn't seem to work. 我曾尝试在客户端使用fetch API向服务器发出请求以检索此数据，但它似乎不起作用。

Server.js Server.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

Answer 1

You are sending a GET request to a POST endpoint. 您正在向POST端点发送GET请求。 This you can fix by passing a body and a method in your fetch on client side. 这可以通过在客户端的fetch中传递一个body和一个方法来解决。 Also, you should handle the response as it comes back. 此外，您应该在回复时处理响应。 Rewrite your fetch to something like this. 将你的获取重写为这样的东西。

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

如何将POST请求中的JSON发送给客户端？

问题描述

1 个解决方案

解决方案1
0 2019-04-05 14:18:04

如何将POST请求中的JSON发送给客户端？

问题描述

1 个解决方案

解决方案1 0 2019-04-05 14:18:04

解决方案1
0 2019-04-05 14:18:04