使用AJAX进行Bootstrap模式登录
[英]Bootstrap Modal Login with AJAX
问题描述
我在一个网站上工作，该网站已将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">×</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）。
任何帮助是极大的赞赏。
2 个解决方案
解决方案1
4 已采纳 2015-08-29 12:08:44
以下是一些入门知识：这基本上就是我所使用的，并且与您所拥有的非常相似。 它使用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">×</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);
解决方案2
0 2015-08-29 12:01:20
如果要实现AJAX ，则执行提交的按钮将具有某种类型的submit并在表单上触发submit事件，这将使您的代码甚至无法达到执行AJAX调用的功能。
相反，您可以将按钮的类型从submit更改为button ，并添加以下处理程序以在表单提交时触发：
$('#login').submit(function(){
//prepare your username, password and callback
login(username, password, callback);
});
使用Bootstrap 3.x模式的Django用户登录的Ajax问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.