為什么我沒有使用 xmlhttprequest "POST" 在 nodejs 服務器中接收數據？

Question

我使用 XMLHttpRequest“POST”從 ajax.js 向后端 server.js 發送數據，一切正常，除了收到的是 UNDEFINED ，當我“console.log”它使用“req.body”我期待看到它就像 "{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]': '' }

我錯過了理解/錯過了什么？ 泰尋求幫助:)

Answer 1

就像之前的評論所述，您將內容類型設置為x-www-form- urlencoded ，因此您應該將數據作為 FormData 傳遞。 如果我是你，我會簡單地將內容類型更改為application/json 。 那應該可以解決您的問題