AJAX登录表单不能正常工作
AJAX登录表单不能正常工作
提问于 2018-08-25 08:15:55
我正在用一个登录页面创建一个简单的门户，但由于我对AJAX还不熟悉，所以我仍然停留在AJAX问题上。
我有一个文件login.php，其中有一个简单的html表单，单击它将首先检查名为test.php的php文件中的示例凭据。但是，在输入错误的凭据或没有凭据时，我使用jgrowl通知在右上角弹出，它显示了两种错误类型，一种是无效凭据，另一种是错误。如果匹配成功，它将重定向到index.php文件。
下面是我的代码附件：
<script>
$("#submit").click( function() {
$.post( $("#login-validation").attr("action"),
$("#login-validation :input").serializeArray(),
function(data) {
var x = data;
if(x=="ok"){
$("#submit").html('Signing In ...');
setTimeout(' window.location.href = "index.php"; ',4000);
}
else if(x=="error"){
$.jGrowl("error", {
sticky: false,
position: 'top-right',
theme: 'bg-blue-alt'
});
}
else{
$.jGrowl( x , {
sticky: false,
position: 'top-right',
theme: 'bg-blue-alt'
});
}
});
$("#login-validation").submit( function() {
return false;
});
});
login.php
<form action="test.php" id="login-validation" class="col-md-4 col-sm-5 col-xs-11 col-lg-3 center-margin" method="post">
<h3 class="text-center pad25B font-white text-transform-upr font-size-23"><b>Employee Self Service Login</b></h3>
<div id="login-form" class="content-box bg-default">
<div class="content-box-wrapper pad20A">
<img class="mrg25B center-margin radius-all-100 display-block" src="http://54.255.228.114/budget/assets/image-resources/indiannica.png" alt="" >
<div class="form-group">
<div class="input-group">
<span class="input-group-addon addon-inside bg-gray">
<i class="fa fa-envelope-o" aria-hidden="true"></i>
</span>
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="Enter email" name="email">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon addon-inside bg-gray">
<i class="fa fa-unlock-alt" aria-hidden="true"></i>
</span>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" name="password">
</div>
</div>
<div class="form-group">
<button type="submit" id="submit" class="btn btn-block btn-primary">Login</button>
</div>
</form>test.php
<?php
if($_POST['email']=="123" && $_POST['password']=="123"){
echo 'ok';
}else if($_POST['email']=="456" && $_POST['password']=="456"){
echo 'error';
}else if($_POST['email']=="789" && $_POST['password']=="789"){
echo 'invalid credentials';
}
else{
echo '404';
}?>回答 2
Stack Overflow用户
发布于 2018-08-29 06:21:46
我已经更新了ajax代码以及test.php页面。
带有数据类型json的ajax代码
$("#login-validation").submit( function(e) {
e.preventDefault();
dataVar = { email:$('input[name="email"]').val(), password:$('input[name="password"]').val() }
$.ajax({
type: "POST",
url: "test.php",
data: dataVar,
dataType: "json",
success: function(data) {
var x = data;
console.log(x);
if(data.status=="success"){
$("#submit").html('Signing In ...');
setTimeout(' window.location.href = "index.php"; ',4000);
}
else if(data.status=="error"){
$.jGrowl("error", {
sticky: false,
position: 'top-right',
theme: 'bg-blue-alt'
});
}
else{
$.jGrowl( x , {
sticky: false,
position: 'top-right',
theme: 'bg-blue-alt'
});
}
}
});
});只需要以json格式响应的test.php页面
<?php
if($_POST['email']=="123" && $_POST['password']=="123"){
echo json_encode(array('status'=>"success"));
}else if($_POST['email']=="456" && $_POST['password']=="456"){
echo json_encode(array('status'=>"error"));
}else if($_POST['email']=="789" && $_POST['password']=="789"){
echo json_encode(array('status'=>"error"));
}
else{
echo json_encode(array('status'=>"404"));
}?>Stack Overflow用户
发布于 2018-08-25 08:29:10
用脚本代替你的
<script type="text/javascript">
$("#login-validation").submit( function(e) {
e.preventDefault();
dataVar = { email:$('input[name="email"]').val(), password:$('input[name="password"]').val() }
$.ajax({
type: "POST",
url: "test.php",
data: dataVar,
dataType: "text",
success: function(data) {
var x = data;
if(x=="ok"){
$("#submit").html('Signing In ...');
setTimeout(' window.location.href = "index.php"; ',4000);
}
else if(x=="error"){
$.jGrowl("error", {
sticky: false,
position: 'top-right',
theme: 'bg-blue-alt'
});
}
else{
$.jGrowl( x , {
sticky: false,
position: 'top-right',
theme: 'bg-blue-alt'
});
}
}
});
});
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52015313
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号