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

时间:2015-01-17 15:35:31

标签: javascript node.js express

为什么此表单会两次发送数据?此外,第二次,数据是“未定义的”。

表格:

<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

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

2 个答案:

答案 0 :(得分:3)

您的代码是通过ajax发布的,但它并没有阻止发布表单的普通浏览器操作。您没有从普通表单帖子中获取任何参数,因为您的<input>元素没有&#34; name&#34;属性。

您可以{&#34;提交&#34> return false;处理程序,以防止正常的表单提交。

答案 1 :(得分:0)

请尝试以下操作:在提交表单时在表单中返回false,以防止其两次提交 <form action="/loginPage" method="POST" onSubmit="return false" >