当返回false时，Javascript AJAX调用在firefox中失败;

Question

有几个类似的问题，但它们看起来并不相同所以它在这里？

我有一个网站，我有一个登录表格。 我想使用ajax来调用php函数，而一切都在chrome中工作正常。 在firefox中，当我点击触发logIn（）javascript函数的登录按钮时，我被重定向到javascript：logIn（）页面，这是白色的，只是说错。 如果我在logIn（）方法中删除返回false，它似乎工作正常。

<form  method="post" id="loginform" action="javascript:logIn()">
    <div>
        <input type="text" value="Username..." name="username" id="username" onfocus="defaultInputUsername(this)" onblur="clearInputUsername(this)" />
        <input type="text" value="Password..." name="passwordText" id="passwordText" onfocus="setPass()"/>
        <input type="password" value="" name="password" id="password" onfocus="defaultInputPassword(this)" onblur="checkPass()" />
        <input type="submit" id="submit" value="Login" name="Submit"/>
        <a href="create-account.php" id="create"><span>Create Account</span></a>
    </div>
</form>

上面是调用logIn（）javascript方法的表单，如下所示：

function logIn() {
    var action = "check-login.php";
    var form_data = {
        username : $("#username").val(),
        password : $("#password").val(),
        is_ajax : 1
    };

    $.ajax({
        type : "POST",
        url : action,
        data : form_data,
        success : function(response) {
            if(response != 'failed')
                $("#loginform").slideUp('slow', function() {
                    $("#login_response").html('<ul id="usernav" class="sf-menu sf-js-enabled sf-shadow"><li><div id="message"></div><ul><li><a href="#"><span>View Profile</span></a></li>  <li><a href="#" onclick="logOut()"><span>Logout</span></a>  </li></ul></li></ul>');
                    $("#message").html('<a id="userlink" href="#"><span>' + response + '</span></a>');
                    $("ul.sf-menu").superfish({
                        animation : {
                            height : 'show'
                        }, // slide-down effect without fade-in
                        delay : 800, // 1.2 second delay on mouseout
                        autoArrows : false
                    });
                });
            else {
                $("#username").css("border", "2px red inset");
                $("#password").css("border", "2px red inset");
            }
        }
    });

    return false;
}

如果有人可以告诉我什么时候它在chrome中工作而不是firefox，如果我应该使用return false。 那将是真棒。

谢谢！

Answer 1

这是非常规的代码，因此有点难以完全回答。

为了破解这个东西，我会将你的行动改为onsubmit =。 “行动”不是为了这个目的。

<form ...stuff... onsubmit="return logIn();">

onsubmit中的return false将阻止页面发布。 请确保您注意到它返回了logIn（）的结果，在您的情况下，它始终为false。

你也可以这样做：

onsubmit="logIn(); return false;"

并从logIn函数中删除return false。

注意 ：默认情况下，ajax调用是异步的。

Answer 2

由于您已经在使用jQuery，为什么不将action-attribute设置为在用户禁用JavaScript时登录用户的页面，然后添加一些自动绑定提交按钮的javascript以使用您的logIn（） - 函数

像这样的东西可能会工作（没有测试它，但它应该工作）：

//When document is ready/loaded
$(document).ready(function () {

    //Register click handler for submit-button with id "submit"
    $("#submit").click(function(event) {
        //call javascript and prevent postback
        event.preventDefault();
        logIn();
    });
}

并且您的loginform看起来像这样：

<form  method="post" id="loginform" action="login-page-without-javascript.php">