Question

我正在使用Ajax提交登录表单而不刷新页面。我添加了一个函数来查看数据是否返回“错误”（当用户输入错误的电子邮件/密码时会出现）。如果它没有返回“错误”，则用户已登录并将在2秒内转移到该页面。

问题是我的按钮就像一个双击按钮，我看不出原因。这是我的JS文件：

$(function() { 
    $("#goLogin").click(function() {
        $.ajax({
            type: "POST",
            url: "db-requests/db-login.php",
            data: $("#loginForm").serialize(),
            success: function(data,textStatus,jqXHR){   finishLogin(data,textStatus,jqXHR); }
        });
    });
});

function finishLogin( data , textStatus ,jqXHR ) {

    if ( data == "error" ) {
        $('.errorMsg').fadeIn(500).hide();
        $('.succesMsg').fadeOut(300).hide();
    } else {
        $('.succesMsg').fadeIn(500).show();
        $('.errorMsg').fadeOut(300).hide();
        setTimeout("location.href = 'protected.php';",2000);
    }

}

我已经尝试将它放在document_ready标签之间，但这也不起作用。

部分HTML代码：

<div class="login form">

            <div class="login-header">Please Login</div>

            <form method="post" id="loginForm" name="form">

                <label for="email" class="short">Email*</label>
                <input type="text" name="email" id="email" class="required" placeholder="" />

                <label for="password" class="short">Password *</label>
                <input type="password" name="password" id="password" class="required" placeholder="" maxlength="15" />

            </form>

            <div id="login-functions">
                <div class="loginbtn-container">
                    <input type="submit" id="goLogin" name="goLogin" class="button green" value="Login" /> 
                </div>

                <div class="login form actions">
                <p class="register account">Register an account</p>
                <p class="request password">Lost your password?</p>
                </div>
           </div>

</div>

        <div class="errorMsg">Incorrect. Please recheck your details</div>
        <div class="succesMsg"><b>You've been logged in!</b> Please wait while we transfer you</div>

Answer 1

请先在表单结束标记内移动提交按钮

<input type="submit" id="goLogin" name="goLogin" class="button green" value="Inloggen" />

上面的按钮位于</form>标记之后。

Answer 2

$('.errorMsg').fadeIn(500).hide();
$('.succesMsg').fadeOut(300).hide();

你是说要隐藏两者吗？我看到click工作正常，但理想情况下应该submit

在表单中取出submit，并使用preventDefault()

阻止正常表单提交

$("#goLogin").submit(function(e) {
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "db-requests/db-login.php",
        data: $("#loginForm").serialize(),
        success: function(data,textStatus,jqXHR){   finishLogin(data,textStatus,jqXHR); }
    });

});

Answer 3

因为你点击输入类型提交并进行Ajax就可以了;它导致提交2次。

为了避免它，你可以像Zach Leighton所说的那样使用;或使用如下

$("#goLogin").click(function(e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "db-requests/db-login.php",
            data: $("#loginForm").serialize(),
            success: function(data,textStatus,jqXHR){   finishLogin(data,textStatus,jqXHR); }
        });
    });

单击事件充当双击事件

3 个答案: