使用AJAX登录模态登录

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

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

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

的index.php

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

— // —

  
 
 
 
 × 
 
 
 
 
 
 Email or Username  
 
 Password  
 
  Remember me 
 
 SIGN IN 
 
 
 
or
 
 Sign in with Facebook Sign in with Google+ 
 
 
 
Need an account? Sign up here.
 
 
 
  

的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模式登录表单中，以成功显示错误消息（例如“用户名和/或密码不正确”）？ 目前，没有显示错误，用户未经过身份validation（它只是返回index.php）。

任何帮助是极大的赞赏。

Answer 1

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

的login.html

          
 Login 
 
 
 
 
 ×Close 
Login
 
 
 
 YOUR FORM ELEMENTS HERE Username:  
 
 Close Login 
 
 
 
 
 
      

的login.php

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