javascript - 将数据从 Javascript 文件发送到后端 Node.js

Question

我正在构建我的第一个项目，所以我对 Js、Node Js 等很陌生。我的问题是如何将数据从 Javascript 文件发送到后端，在这种情况下是 Node.js 文件，Javascript 文件是链接到 html 文件。

我的 HTML:

<button type="button" class="btn btn-light bn" id="1"><span 
class="dif">3/8"</span> Q2.15</button>

我的脚本:

const button = document.getElementById('1');

button.addEventListener('click', function(e) {


fetch('/clicked', {
    method: 'POST', 
    body: JSON.stringify({ id: e.currentTarget.id }),
 })
   .then(function(response) {
       if(response.ok) {
       console.log('Click was recorded');
        return;
      }
     throw new Error('Request failed.');
  })
    .catch(function(error) {
    console.log(error);
    });
}); 

Node JS 代码:

app.post('/clicked', (req, res) => {
  const click = JSON.parse(req.body).id;
  Product.findOne({id: click}, function(err, foundLList) {
        if(err) {
            console.log(err);
        } else {
            console.log(foundLList);
        }
    } 
  ); 
});

我想要完成的是将单击的按钮的 ID 发送到后端 (node.js) 但它不起作用我尝试 console.log thr req 和 req.menu 以及当我执行 req.menu仅出现 {}，当我将 .id 添加到请求时显示未定义。

Answer 1

在您的 fetch() 调用中，您应该将 Content-Type header 指定为 application/json。这样，您的服务器就知道如何处理它。

fetch('/clicked', {
  method: 'POST',
  body: JSON.stringify({ id: e.currentTarget.id }),
  headers: {
    'Content-Type': 'application/json'
  }
})

在 Node.js 方面，您似乎在使用 Express。确保您还使用了 Body Parser middleware ，它可以处理您的 JSON。

const bodyParser = require('body-parser');
app.use(bodyParser.json());

或者，对于较新/当前版本的 Express，您可以使用 express.json() .