javascript - 为什么 POST 方法向服务器发送两次表单数据？

Question

为什么这个表单发送了两次数据？同样，第二次，数据是“未定义的”。

形式:

<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

过去一整天我都被困在这个问题上。请帮助我。

Answer 1

当您第一次提交时，jQuery 会触发并通过 AJAX 发送 POST。第二次提交是触发 HTML 表单。您想要停止提交 HTML 表单并改用您的自定义处理程序。

你得到 undefined 的原因是因为你的表单中的输入没有 name 属性。

您应该在 jQuery 处理程序中返回 false; 以防止表单触发，并对响应数据做一些处理。