Ajax POST首次尝试失败

Question

I have a wierd issue with the below code:

<script type="text/javascript">
    $(document).ready(function(){
        $('#loginSubmit').click(function () {
            //start the ajax
            var f = $("#loginForm");
            request = $.ajax({
                //this is the php file that processes the data
                url: "app/index.php",
                type: "POST",
                data: f.serialize(),
                dataType:"json",
                cache: false
            });
            request.done(function (response, textStatus, jqXHR){
                // log a message to the console
                console.log("Hooray, it worked!");
                // callback handler that will be called on failure
                request.fail(function (jqXHR, textStatus, errorThrown){
                    // log the error to the console
                    console.error(
                        "The following error occured: "+
                        textStatus, errorThrown
                    );
                    alert("fail")
                });
                // callback handler that will be called regardless
                // if the request failed or succeeded
                request.always(function () {
                    // reenable the inputs
                    alert("ok")
                });
            });
        });
    });
</script>

I am using firebug to debug the code and basically when the submit button is clicked, the post request receives no response, however if I then resend the post data using firebug it all works fine?

Any ideas?

UPDATE - FORM CODE

<form id="loginForm" action="" method="post" name="loginForm">
    <h1>Login Form</h1>
    <div>
        <input type="text" placeholder="Email" required="" id="email" name="userEmail" />
    </div>
    <div>
        <input type="password" placeholder="Password" required="" id="userPassword" name="userPassword" />
    </div>
    <div>
        <input type="hidden" value="login" id="tag" name="tag" />
        <input type="submit" value="Log in" id="loginSubmit" name="loginSubmit" />
        <a href="#">Lost your password?</a>
    </div>
</form>

Answer 1

change your button type for preventing default submission of FORM

submit to button

---

Or change your event of click to submit

$('#loginform').submit(function(event){
    event.preventDefault();

    $.ajax({
        //this is the php file that processes the data
        url: $(this).attr("action"),
        type: "POST",
        data: $(this).serialize(),
        dataType:"json",
        cache: false
    })
        .done(function (response, textStatus, jqXHR){
            // log a message to the console
            console.log("Hooray, it worked!");
        })
        .fail(function (jqXHR, textStatus, errorThrown){
            // log the error to the console
            console.error(
                "The following error occured: " + textStatus, 
                errorThrown
            );
            alert("fail");
        })
        .always(function () {
            // callback handler that will be called regardless
            // if the request failed or succeeded
            // reenable the inputs
            alert("ok");
        });
});