Mein Kundencode:
<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>
Mein serverseitiger Code:
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')
});
Bitte bedenken Sie zunächst, dass ich neu im Backend bin. Wenn ich versuche, die protokollierten Daten in console.log zu protokollieren, wird ein leeres Objekt zurückgegeben. Ich kann nicht verstehen, warum mein req.body ein leeres Objekt zurückgibt, aber wenn ich versuche, dasselbe zu tun, indem ich action:"/login" und das gebe Methode Wenn: „post“ innerhalb des Formular-Tags funktioniert es wie erwartet und gibt mir die von mir bereitgestellten Eingaben. Bitte hilft mir jemand, mein Kopf brennt, vielen Dank im Voraus.
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 请求就可以工作，使用内置解析器：