我的客户端代码:
<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”和method:表单标签内的“post”,它按预期工作,并提供我提供的输入。请有人帮助我,我的头是燃烧和提前感谢你。
1条答案
按热度按时间gpfsuwkq1#
req.body
是空的,因为当你用axios
发送它时,你实际上是在发送一个JSON(application/json
)有效负载,你在后端没有JSON有效负载解析器,只有URL编码,而HTML表单以application/x-www-form-urlencoded
发送它,这就是它工作的原因。所以,你需要用axios发送URL编码的请求,你可以使用
URLSearchParams
将JSON对象转换为查询字符串。试试这个或者,只需在后端添加一个JSON解析器,您的原始JSON请求就可以工作,使用内置解析器: