我正在嘗試學習 XMLHttpRequests。我正在嘗試向服務器發送一些輸入，但是當它到達那里時，物件是空的，比如 {} 我注釋掉的那個 setRequestHeader，如果它在，物件會被正確列印出來，但是我得到一個錯誤應該在瀏覽器上打開。但是如果我把它放在 open() 陳述句之后，它會再次停止作業并且物件到達空。我也嘗試了所有這些，并在發送之前嘗試了 JSON.stringfy 變數，但它也不起作用。
//server.js
const express = require('express');
const app = express();
const cors =require('cors')
app.use(cors())
app.use(express.urlencoded({extended:true}))
app.post('/frases', function(req, res) {
console.log(req.body);
const frase = new phrase(req.body);
// console.log(frase);
})
app.listen(3000, () => console.log('listening on 3000...'));
//script.js
var form = document.getElementsByTagName('form')[0];
const xhr = new XMLHttpRequest();
// xhr.setRequestHeader('Content-Type', 'application/json');
form.onsubmit = (e) => {
e.preventDefault();
const thisName = form.elements[0].name;
const thisValue = form.elements[0].value;
const frase = {[thisName]:thisValue};
console.log(frase)
xhr.open('POST', 'http://localhost:3000/frases');
xhr.send(frase);
};
<!-- index.html -->
<form action = "http://localhost:3000/frases" method="post">
<label for="frasefavorita"> Qual é a sua frase favorita?
<input id= 'frase' type="text" name="frasefavorita">
<button id= 'send-frase' type="submit">Enviar</button>
</form>
uj5u.com熱心網友回復：
req.body默認情況下為空，因為默認情況下不讀取傳入請求的正文。您需要與傳入的內容型別匹配的中間件，以便讀取該正文、決議它并將結果放入req.body.
而且，在您的 xhr 呼叫中，您必須決定將使用什么內容型別來發送資料，必須將資料放入該內容型別中，并且必須適當地設定該標頭。然后，您將能夠將正確的中間件添加到您的服務器以讀取和決議該正文，然后，只有這樣，您才能在req.body您的服務器上訪問它。
如果您打算將其作為 JSON 發送，那么您可以在客戶端上執行此操作以設定 JSON 的內容型別并將資料格式化為 JSON：
form.onsubmit = (e) => {
e.preventDefault();
const thisName = form.elements[0].name;
const thisValue = form.elements[0].value;
const frase = {[thisName]:thisValue};
const xhr = new XMLHttpRequest();
xhr.setRequestHeader("Content-Type", "application/json");
xhr.open('POST', 'http://localhost:3000/frases');
xhr.send(JSON.stringify(frase));
};
然后，在您的服務器上，您可以在/frases路由處理程式之前添加此中間件：
// read and parse incoming JSON request bodies
app.use(express.json());
這將讀取并決議application/json來自您的 Ajax 呼叫的內容型別資料。
PS 我建議您使用fetch()介面來撰寫新代碼，而不是 XMLHttpRequest API。 fetch()只是更容易使用和更現代的設計（使用承諾）。
uj5u.com熱心網友回復：
呼叫open函式后嘗試設定header
xhr.open('POST', 'http://localhost:3000/frases');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(frase);
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/404612.html
標籤：
上一篇：JSON未正確編入索引