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

Question

Why is this form sending data twice? Also, the second time, the data is "undefined".

The form:

<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>

The client-side script:

$(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){
            ;
        });

    });
  });

The server-side script:

app.post('/loginPage', function(req, res) {

var username = req.body.username;
console.log("Now, "+username);
res.send("Hi, "+username);

//res.sendFile(__dirname + '/lobby.html');
});

This is the output I get when I run this code:

Hi, Sho
Hi, undefined

I'm stuck at this one for the past whole day. Please help me.

Answer 1

When you submit the first time, jQuery fires and sends the POST through AJAX. The second submit is the HTML form firing. You want to stop the HTML form from submitting and use your custom handler instead.

The reason you're getting undefined is because you don't have name attributes on the inputs in your form.

You should return false; in your jQuery handler to prevent the form from firing, and do something with the response data as well.

Answer 2

Your code is posting via ajax, but it's not preventing the ordinary browser action of posting the form. You don't get any parameters from the normal form post because your <input> elements don't have "name" attributes.

You can return false; from the "submit" handler to prevent the normal form submission.

Answer 3

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