为什么我没有使用 xmlhttprequest "POST" 在 nodejs 服务器中接收数据？

Question

我使用 XMLHttpRequest "POST" 从 ajax.js 向后端 server.js 发送数据，一切正常，除了收到的是 UNDEFINED ，当我使用 "console.log" 时使用 "req.body" im期待看到它像 "{name: 'MrSalsa'}" ，但不幸的是它的打印是这样的 "[Object: null prototype] { MrSalsa: '' }"

这是前端的 ajax.js：

document.getElementById('btnPost').addEventListener('click', 
function(e){
  e.preventDefault();
  var data = document.getElementById('input').value;

  var xhr = new XMLHttpRequest();
  xhr.open('post', '/api', true);
  xhr.setRequestHeader('Content-type', 'application/x-www-form- 
urlencoded');
  xhr.onload = function(){
    if(this.status == 200){
      document.getElementById('text').innerText = this.responseText;
    }else if(this.status == 403){
      document.getElementById('text').innerText = this.responseText;
    }else if(this.status == 404){
      document.getElementById('text').innerText = this.responseText;
 }
 }
  xhr.send(data);
})

这是后端 server.js 文件：

const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');

const app = express();
var urlencodedParser = bodyParser.urlencoded({ extended: false });
const PORT = process.env.PORT || 5050;

var users = require('./views/resources/users')

app.use(express.static(path.join(__dirname, 'views')));

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

app.get('/', (req,res)=>{
  res.render('home');
})
app.get('/api', (req,res)=>{
  res.json(users);
})
//the problem is bellow in the "POST" handler
app.post('/api', urlencodedParser, (req,res)=>{
   console.log(req.body);
res.send('welcome '+req.body.name);
})

app.listen(PORT, console.log(`Server running on PORT : ${PORT}`));

这是 HTML 文件中的表单：

<form>
  <input id="input" type="text" name="name" placeholder="text 
  here.." required>
  <button id="btnPost" type="submit">Post</button>
</form>

当我 console.log 它是结果：

[nodemon] starting `node server.js`
Server running on PORT : 5050
[Object: null prototype] { MrSalsa: '' }

我试着像这样在前端制作一个对象：

xhr.send({name: data});

但是当我 console.log 它是结果：

[nodemon] starting `node server.js`
Server running on PORT : 5050
[Object: null prototype] { '[object Object]': '' }

我是否错过了理解/错过了什么？ Ty寻求帮助:)

Answer 1

就像之前的 cmets 所说，您将内容类型设置为 x-www-form- urlencoded，因此您应该将数据作为 FormData 传递。如果我是你，我会简单地将内容类型更改为application/json。这应该可以解决您的问题