我的客戶端程式碼:
<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="form.css" /> </head> <body> <form action="/login" method="post" class="form"> <input type="text" name="txt" class="txt" id="txt" placeholder="name" /> <input type="submit" class="submit" id="submit" /> </form> <script defer src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script> let submit = document.querySelector(".submit"); const form = document.querySelector(".form"); form.addEventListener("submit", (e) => { e.preventDefault(); const formData = new FormData(form); const formObject = {}; formData.forEach((value, key) => { formObject[key] = value; }); console.log(axios.defaults) axios .post("http://localhost:8080/login", formObject) .then(function (response) { console.log(response.data); }) .catch(function (error) { console.log(error); }); }); </script> </body> </html>
我的伺服器端程式碼:
const app = express(); const path = require("path"); app.use(express.static('./public',{index:'form.html'})); app.use(express.urlencoded({extended:true})); app.post('/login',(req,res)=>{ //const txt = req.body; console.log('logged data: ',req.body); res.send('Thanks'); }) app.listen(8080, () => { console.log('server is running...in port 8080') });
首先請記住,我是後端新手。當我嘗試console.log 記錄的資料時,它返回一個空對象,我無法理解為什麼我的req.body 返回一個空對象,但是當我嘗試透過給出action:"/login" 和方法來執行相同操作時:表單標籤內的“post”它按預期工作並為我提供我提供的輸入。請有人幫助我,我的頭在燃燒,提前謝謝你。
P粉3331862852024-04-01 09:14:42
req.body
是空的,因為當您使用axios
發送它時,您實際上發送的是JSON (application/json
) 負載,且後端沒有JSON 負載解析器,只有URL 編碼,而HTML 表單以application/x-www-form-urlencoded
格式傳送它,這就是它運作的原因。
因此,您需要使用 axios 發送 URL 編碼的請求,您可以使用 URLSearchParams
將 JSON 物件轉換為查詢字串。試試這個。
axios .post("http://localhost:8080/login", new URLSearchParams(formObject))
或者,只需在後端添加 JSON 解析器,您的原始 JSON 請求就可以工作,使用內建解析器:
app.use(express.json());