Bootstrap Modal Войти с помощью AJAX

Я работаю над веб-сайтом, где я использовал модальный компонент Bootstrap как форму входа.

У меня есть мой сценарий входа в систему, который работает правильно (протестирован без модального), однако он явно не может отображать ошибки, поскольку модальный закрывается до появления каких-либо ошибок. Мой лучший выбор для отображения ошибок – использовать AJAX . Я попытался внедрить AJAX в него, но, похоже, терпит неудачу (это не то, что я знаю).

• SendGrid с динамическими параметрами PHP
• PHP Mailer. Нажав кнопку send, загрузите скрипт php, но не отправляйте почту
• Передача значения из идентификатора bootstrap-файла в переменную php
• передача параметра в удаленный модальный в бутстрап 3
• Как получить значение идентификатора данных и поместить его в twitter bootstrap modal?

Вот код, который я пробовал до сих пор:

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> 

— // —

• Показывать модальный диалог после отправки формы
• Bootstrap Отзывчивый редактор WYSWIG не отправляет входные данные в php
• Структура CSS-кода с циклами PHP Round 2
• Встроенная «обязательная» звездочка в ярлыке формы Laravel
• Bootstrap - требуется скрывать контент до тех пор, пока модальные нагрузки

  <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]])); } 

Мой вопрос в том, как я могу правильно реализовать AJAX в моей модальной форме входа в Bootstrap, чтобы успешно отображать сообщения об ошибках (например, «Неверное имя пользователя и / или пароль»)? На данный момент ошибка не отображается, и пользователь не аутентифицирован (он просто возвращается к index.php).

Любая помощь приветствуется.

Related of "Bootstrap Modal Войти с помощью AJAX"