Question

我正在使用Jquery AJAX来捕获登录错误，但是当我提交一个糟糕的登录时，我看不到div loginError

我在http://api.jquery.com

上搜索过

我使用了这个例子http://hayageek.com/jquery-ajax-form-submit

这是我的js：

$().ready(function() {
    $("#loginForm").validate({
        rules: {
            email: {
                required: true
            },
            password: {
                required: true,
                minlength: 6,
                maxlength: 20
            }
        },
        messages: {
            email: {
                required: "Please provide an email"
            },
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 6 characters long",
                maxlength: "Your password must be at most 20 characters long"
            }
        }
    });

    $("#loginForm").submit(function(e)
    {
        var postData = $(this).serializeArray();
        var formURL = $(this).attr("action");
        $.ajax( {
            url : formURL,
            type: "POST",
            data : postData,
            error: function(jqXHR, textStatus, errorThrown) {
                $("#loginError").show();
            }
        });
        e.preventDefault();
    });

当我删除e.preventdefault（）;我可以简单地看到这个div，但我的页面重新加载和 div消失了！

以下是我的表格：

<form class="cmxform form-signin" id="loginForm" method="POST" action="">
            <fieldset>
                <div class="login-wrap">
                    <h2 class="form-signin-heading"><?php echo lang('login.title')?></h2>
                    <div id="loginError" class="alert alert-warning" hidden="hidden">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                        <strong>Oh snap!</strong> <?php echo lang('login.error')?>
                    </div>
                    <div class="form-group ">
                        <label class="control-label" for="femail">Email:</label>
                        <input class="form-control" type="email" id="femail" name="email" placeholder="<?php echo lang('login.email') ?>" autofocus required>
                    </div>
                    <div class="form-group ">
                        <label class="control-label" for="fpassword">Password:</label>
                        <input class="form-control" type="password" id="fpassword" name="password" placeholder="<?php echo lang('login.password') ?>" required>
                    </div>
                    <label class="control-label checkbox" for="frememberme">
                        <input type="checkbox" id="frememberme" name="rememberme" value="rememberme"><?php echo lang('login.rememberme')?>
                        <span class="pull-right"> <a href="forget"><?php echo lang('login.forget') ?></a></span>
                    </label>
                    <button class="btn btn-lg btn-block btn-login" type="submit"><?php echo lang('login.login')?></button>
                    <a href="register"><button type="button" class="btn btn-lg btn-block btn-register"><?php echo lang('login.register')?></button></a>
                    <div class="login-social-link">
                        <p><?php echo lang('login.joinus') ?></p>
                        <a href="index" class="facebook">
                        <i class="icon-facebook"></i>Facebook</a>
                        <a href="index" class="twitter">
                        <i class="icon-twitter"></i>Twitter</a>
                    </div>
                </div>
            </fieldset>
        </form>

也许它来自我的CodeIgniter代码。

提前感谢！

Answer 1

尝试这样的事情

    $("#loginForm").submit(function(e)
    {
        e.preventDefault();
        var postData = $(this).serializeArray();
        var formURL = $(this).attr("action");
        $.ajax( {
            url : formURL,
            type: "POST",
            data : postData,
            error: function(jqXHR, textStatus, errorThrown) {
                $("#loginError").show();
            }
        });
    });

Answer 2

试试这个：

$("#loginForm").submit(function (e) {
    var postData = $(this).serializeArray();
    var formURL = $(this).attr("action");
    $.ajax({
        url: formURL,
        type: "POST",
        data: postData,
        success: function (response) {
            if (response) {
                //do stuff if login is correct
            } else {
                $("#loginError").show();
            }

        },
        error: function (jqXHR, textStatus, errorThrown) {
            //$("#loginError").show();
        }
    });
    e.preventDefault();
});

注意：数据库操作后从服务器端获取响应。并根据您的要求进行 IF / ELSE条件的变化

登录错误后显示隐藏的div：JQuery和AJAX

2 个答案: