jQuery ajax第二篇文章

jQuery ajax second post

本文关键字:二篇 文章 ajax jQuery      更新时间:2023-09-26

当我第一次点击提交按钮时,这些代码就工作了。但当我第二次点击该按钮时,即使电子邮件和密码值为真,也不会发生任何事情,用户也无法登录。但如果我第一次写下真正的值,它就可以工作,用户也可以登录。所以我认为这个问题的原因是"return false;"这句话。但如果我去除了虚假的回报;短语,表单帖子和ajax代码变得毫无用处。我必须避免在没有ajax的情况下发帖。jQuery:

<script>
    $(document).ready(function(){
    $('#submit-btn').click(function(){
        var email = $('#email').val();
        email = $.trim(email);
        var password = $('#password').val();
        password = $.trim(password);
            if(email == "") {
                $('#email').css({
                    "background-color": "#FF7070"
                });
                $('#box1').css({
                        "visibility": "visible"
                });
                return false;
            }else if(password == "") {
                $('#password').css({
                    "background-color": "#FF7070"
                });
                $('#box2').css({
                        "visibility": "visible"
                    });             
                return false;
            }else{
                  $.ajax({
                    type: "POST",
                    url: "ajax.php",
                    data: $('#loginform').serialize(),
                    timeout: 5000,
                    success: function(c) {
                        if(c == "no") {
                            $('#box3').css({
                                "visibility": "visible"
                            });
                            return false;
                        } else if (c == "ok") {
                            window.location.href = "homepage.php";
                        }
                    },
                    error: function(a, b) {
                        if (b == "timeout") {
                            alert("Error: #101");
                        }
                    },
                    statusCode: {
                        404: function(){
                            alert("Error: #102")
                        }
                    }
                  });
            }
           return false;
    })
});
</script>

Html:

<form name="loginform" id="loginform" method="post" action="">
            <div class="field">
                <input type="text" maxlength="40" id="email" name="email" placeholder="E-mail">
            </div>
            <div class="field">
                <input type="password" id="password" name="password" placeholder="Password" autocomplete="off">
            </div>
            <div class="field">
                <input type="submit" id="submit-btn" value="Log in">
            </div>
            <div class="keep-login">
                <label for="remember">
                    <input type="checkbox" name="remember" id="remember" checked="checked">Remember me
                </label>
                <span><a href="#">Forgot password?</a></span>
            </div>
</form>

PHP:

if(Input::exists()) {
    if(Token::check(Input::get('token'))) {
        $validate = new Validate();
        $validation = $validate->check($_POST, array(
            'email' => array('required' => true),
            'password' => array('required' => true)
        ));
        if($validation->passed()) {
            $user = new User();
            $remember = (Input::get('remember') === 'on') ? true : false;
            $login = $user->login(Input::get('email'), Input::get('password'), $remember);
            if($login) {
                echo "ok";
            } else {
                echo "no";
            }
        } else {
            echo "no";       
        }
    }
}

首先,删除表单元素的方法和操作属性。您可以完全删除表单标记,但如果您想支持非javascript提交,则需要表单标记(然而,最初的问题并没有要求这样做)。您通过jQuery"提交"表单,因此不需要表单标记上的方法和操作。

输入type="password"永远不会自动完成,因此您不需要该属性。

我还添加了一个错误div。这是你的新html:

<div id="error" style="display: none;">Login failed.</div>
<form>
<div class="field">
    <input type="text" maxlength="40" id="email" name="email" placeholder="E-mail">
</div>
<div class="field">
    <input type="password" id="password" name="password" placeholder="Password">
</div>
<div class="field">
    <input type="submit" id="submit-btn" value="Log in">
</div>
<div class="keep-login">
    <label for="remember">
        <input type="checkbox" name="remember" id="remember" checked="checked">Remember me
    </label>
    <span><a href="#">Forgot password?</a></span>
</div>
</form>

用$.post语句替换$.ajax语句,并简单地替换您的逻辑。

$.post("ajax.php", { e: email, p: password }, function (data) {
    if (data == "ok") window.location.href = "homepage.php";
    else $("#error").slideDown().delay(3000).slideUp(); // I added div#error with "Failed to Login" message in the html above
});

如果返回的数据为"ok",则此代码现在将重定向;否则,它将显示div#error(同样,这在上面的html中),延迟3秒,然后隐藏消息。

return false;在上面代码的每个实例中都是不必要的,因为在每个条件之后,代码都结束了——没有其他代码可以阻止执行(这就是为什么在本文中使用return false;)。

您可以在分配变量时在同一行执行$.trim,就像我对slideUp、delay和slideDown所做的那样。