为什么POST方法发送表单数据两次到服务器?

为什么这个表格发送数据两次? 另外,第二次,数据是“未定义的”。

表格:

<form action="/loginPage" method="POST" > Username: <input type="text" id="username"> <br><br> Password: <input type="text" id="password"> <br><br> <input type="submit" id="Login" value="Login" > </form> 

客户端脚本:

 $(document).ready(function(){ $('form').submit(function(event){ //event.preventDefault(); This prevents from sending data twice, but then the page doesn't redirect to "Hi, <username>" $.post("/loginPage",{username: $("#username").val(),password: $("#password").val()}, function(data){ ; }); }); }); 

服务器端脚本:

 app.post('/loginPage', function(req, res) { var username = req.body.username; console.log("Now, "+username); res.send("Hi, "+username); //res.sendFile(__dirname + '/lobby.html'); }); 

这是我运行此代码时得到的输出:

 Hi, Sho Hi, undefined 

过去的一整天,我被困在这一个。 请帮帮我。

当您第一次提交时,jQuery通过AJAX触发并发送POST。 第二个提交是HTML表单的解雇。 您希望停止提交HTML表单并使用您的自定义处理程序。

您得到undefined的原因是因为您的表单中的input没有name属性。

你应该return false; 在你的jQuery处理程序中,以防止表单被触发,并对响应数据做些什么。

你的代码是通过ajax发布的,但是这并不妨碍发布表单的普通浏览器操作。 由于<input>元素不具有“name”属性,因此不会从常规表单文章中获取任何参数。

你可以return false; 从“提交”处理程序,以防止正常的表单提交。