Question

我正在一个网站上，我已经将Bootstrap的模态组件作为登录表单实现。

我的登录脚本工作正常（没有模态测试）但是，显然无法显示错误，因为模式在显示任何错误之前关闭。显示错误的最佳方法是使用AJAX。我试图在其中实现AJAX，但似乎失败了（这不是我熟悉的东西）。

这是我到目前为止尝试过的代码：

的index.php

    <script type="text/javascript">

function login(username, password, callback) {
    var xhr = new XMLHttpRequest();

    xhr.open("POST", "login.php", true);
    xhr.responseType = "json";
    xhr.onload = function() {
        var data = xhr.response;

        if (data["status"] === "failure") {
            callback({
                "errorCode": data["errorCode"],
                "errorMessage": data["errorMessage"]
            });
        } else {
            callback(null, data["redirect"]);
            $("#error").append(errorMessage);
        }
    };
    xhr.send(JSON.stringify({
        "username": username,
        "password": password
    });
}
</script>

--- // ---

    <div id="loginModal" class="modal fade" role="dialog">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
                        <div class="loginForm">
                        <div id="error"></div>
                    <form id="login" action="index.php" method="post">
                        <div class="input-container">
                            <label for="username">Email or Username</label>
                            <input type="text" name="username" required class="form-control"/>
                        </div>
                        <div class="input-container">
                            <label for="password">Password</label>
                            <input type="password" name="password" required class="form-control"/>
                        </div>
                        <div class="input-container">
                            <input type="checkbox" name="remember" value="true" id="remember" />
                            <label for="remember">Remember me</label>
                        </div>
                        <div class="submit-container">
                            <button type="submit" class="btn btn-primary btn-login">SIGN IN</button>
                        </div>
                    </form>
                </div>  
        <h2><span>or</span></h2>    
        <div class="social-signin">
            <a href="#" class="facebook">Sign in with Facebook</a>
            <a href="#" class="google">Sign in with Google+</a>
        </div>
      </div>
      <div class="modal-footer">
        <p>Need an account? <a href="sign-up">Sign up here.</a></p>
      </div>
    </div>

  </div>
</div>

的login.php

--- // ---

 login_complete($user_id);

    $output = [];

    $output["status"] = "success";

    echo json_encode($output);
    exit;
} else {
    echo json_encode(array("status" => "failure", "errorCode": $result[0], "errorMessage": $ERRORMSGS[$result[0]]));
}

我的问题是，如何在我的Bootstrap模式登录表单中正确实现AJAX，以成功显示错误消息（例如“用户名和/或密码不正确”）？目前，没有显示错误，用户未经过身份验证（只返回index.php）。

非常感谢任何帮助。

Answer 1

这里有一些让你入门的东西：这基本上就是我使用的东西，与你的东西非常相似。它使用ajax将表单发送到login.php，它返回一个json响应。神奇的事情发生在login.html中并且非常简单：只需向模态添加messages div，然后使用jQuery定位它以添加消息和相应的Bootstrap警报类。

<强>的login.html

<!DOCTYPE html>
    <html>
    <head>
        <title>Login</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
        <!--[if lt IE 9]>
            <script src="//oss.maxcdn.com/libs/html5shiv/r29/html5.min.js"></script>
            <script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>

        <div class="container">
            <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">Login</button>

            <div class="modal fade" id="myModal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <form id="form" role="form">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                <h4 class="modal-title">Login</h4>
                            </div>
                            <div class="modal-body">
                                <div id="messages"></div>
                                YOUR FORM ELEMENTS HERE
                            Username: <input type="text" name="username">
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="submit" class="btn btn-primary">Login</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>

        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
        <script>
            $('#form').submit(function(e) {

                var form = $(this);
                var formdata = false;
                if(window.FormData){
                    formdata = new FormData(form[0]);
                }

                var formAction = form.attr('action');

                $.ajax({
                    type        : 'POST',
                    url         : 'login.php',
                    cache       : false,
                    data        : formdata ? formdata : form.serialize(),
                    contentType : false,
                    processData : false,
                    dataType: 'json',

                    success: function(response) {
                        //TARGET THE MESSAGES DIV IN THE MODAL
                        if(response.type == 'success') {
                            $('#messages').addClass('alert alert-success').text(response.message);
                        } else {
                            $('#messages').addClass('alert alert-danger').text(response.message);
                        }
                    }
                });
                e.preventDefault();
            });
        </script>
    </body>
</html>

<强>的login.php

<?php

$success = true;

if($success == true) {
    $output = json_encode(array('type'=>'success', 'message' => 'YAY'));
} else {
    $output = json_encode(array('type'=>'error', 'message' => 'WHOOPS'));
}

die($output);

Answer 2

如果你想实现 AJAX ，提交提交的按钮的类型为submit，并在表单上触发submit事件，这不会让你的代码甚至可以到达执行AJAX调用的函数。

相反，您可以将按钮的类型从submit更改为button ，并添加以下处理程序以在表单提交时触发：

$('#login').submit(function(){
      //prepare your username, password and callback
      login(username, password, callback);
});

使用AJAX登录模态登录

2 个答案: