如果验证失败,如何使用 ajax 和 php 以模态形式显示错误,如果成功则重定向到其他页面
How to display error in modal form using ajax and php if validation fail while redirecting to other page if success
我在登录页面中工作,这是一种模态形式,当用户单击登录按钮时,会出现一种模态形式
就是这里
<!-- Signin Window Code -->
<div class="modal fade" id="signup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<form action ="login.php" method="POST" id="frmLogin">
<div class="new-logwrap">
<div class="form-group">
<label>Email</label>
<div class="input-with-icon">
<input type="email" class="form-control" name="login_email" id = "email_login" placeholder="Enter Your Email" required>
<i class="theme-cl ti-email"></i>
</div>
</div>
<div class="form-group">
<label>Password</label>
<div class="input-with-icon">
<input type="password" class="form-control" name="login_pass" id = "pass_login" placeholder="Enter Your Password" required>
<i class="theme-cl ti-lock"></i>
</div>
</div>
<div class="form-groups">
<button type="submit" name="login" id="logBtn" class="btn btn-primary theme-bg full-width .login">Login</button>
</div>
<!-- error message will show here -->
<div id="ack"></div>
我正在使用 ajax 来验证用户是否有效
$('button#logBtn').click(function(){
if($("#email_login").val() == "" || $("#pass_login").val() == "")
$("div#ack").html("please enter username or password");
else
$.post($("#frmLogin").attr("action"),
$("#frmLogin :input").serializeArray(),
function(data) {
$("div#ack").html(data);
});
$("#frmLogin").submit(function (){
return false;
});
});
当用户验证失败时,它会在模态窗体上显示错误,但问题是如果验证成功,要重定向的页面将在模态窗体上被覆盖,即它不是重定向,而是在模态窗体本身上显示下一页
这是我的 php 代码
<?php
// for testing purpose
require 'dbserver.inc.php';
$email = mysqli_real_escape_string($conn,$_POST['login_email']);
$password = mysqli_real_escape_string($conn,$_POST['login_pass']);
$sql = "SELECT count(*) from registergac1 WHERE (email='$email ' AND password = '$password')";
$res = mysqli_query($conn,$sql);
$row = mysqli_fetch_array($res);
if($row[0] > 0)
{
header("location: register.php"); //some page to redirect
}
else
{
echo '<div class="alert alert-danger text-center" role="alert">
Enter correct email or password!
</div>';
}
?>
您不能直接从 php 重定向,因为您使用了 ajax,响应将发送回 ajax 的 success-function
。现在,要解决此问题,请执行以下操作:
Php代码:
if($row[0] > 0)
{
echo "success";//send back to ajax
}
else
{
echo "failed";//send back to ajax
}
并在您的 ajax 端检查出现了哪些值,并根据该值重定向或显示错误消息。
Ajax代码:
$('button#logBtn').click(function() {
if ($("#email_login").val() == "" || $("#pass_login").val() == "")
$("div#ack").html("please enter username or password");
else
$.post($("#frmLogin").attr("action"),
$("#frmLogin :input").serializeArray(),
function(data) {
var datas = $.trim(data); //remove whitespaces if any
if (datas == "success") {
window.location.href = "register.php"; //redirect
} else {
$("div#ack").html('<div class="alert alert-danger text-center" role="alert">Enter correct email or password!</div>'); //show error message
}
});
$("#frmLogin").submit(function() {
return false;
});
});
我在登录页面中工作,这是一种模态形式,当用户单击登录按钮时,会出现一种模态形式 就是这里
<!-- Signin Window Code -->
<div class="modal fade" id="signup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<form action ="login.php" method="POST" id="frmLogin">
<div class="new-logwrap">
<div class="form-group">
<label>Email</label>
<div class="input-with-icon">
<input type="email" class="form-control" name="login_email" id = "email_login" placeholder="Enter Your Email" required>
<i class="theme-cl ti-email"></i>
</div>
</div>
<div class="form-group">
<label>Password</label>
<div class="input-with-icon">
<input type="password" class="form-control" name="login_pass" id = "pass_login" placeholder="Enter Your Password" required>
<i class="theme-cl ti-lock"></i>
</div>
</div>
<div class="form-groups">
<button type="submit" name="login" id="logBtn" class="btn btn-primary theme-bg full-width .login">Login</button>
</div>
<!-- error message will show here -->
<div id="ack"></div>
我正在使用 ajax 来验证用户是否有效
$('button#logBtn').click(function(){
if($("#email_login").val() == "" || $("#pass_login").val() == "")
$("div#ack").html("please enter username or password");
else
$.post($("#frmLogin").attr("action"),
$("#frmLogin :input").serializeArray(),
function(data) {
$("div#ack").html(data);
});
$("#frmLogin").submit(function (){
return false;
});
});
当用户验证失败时,它会在模态窗体上显示错误,但问题是如果验证成功,要重定向的页面将在模态窗体上被覆盖,即它不是重定向,而是在模态窗体本身上显示下一页 这是我的 php 代码
<?php
// for testing purpose
require 'dbserver.inc.php';
$email = mysqli_real_escape_string($conn,$_POST['login_email']);
$password = mysqli_real_escape_string($conn,$_POST['login_pass']);
$sql = "SELECT count(*) from registergac1 WHERE (email='$email ' AND password = '$password')";
$res = mysqli_query($conn,$sql);
$row = mysqli_fetch_array($res);
if($row[0] > 0)
{
header("location: register.php"); //some page to redirect
}
else
{
echo '<div class="alert alert-danger text-center" role="alert">
Enter correct email or password!
</div>';
}
?>
您不能直接从 php 重定向,因为您使用了 ajax,响应将发送回 ajax 的 success-function
。现在,要解决此问题,请执行以下操作:
Php代码:
if($row[0] > 0)
{
echo "success";//send back to ajax
}
else
{
echo "failed";//send back to ajax
}
并在您的 ajax 端检查出现了哪些值,并根据该值重定向或显示错误消息。
Ajax代码:
$('button#logBtn').click(function() {
if ($("#email_login").val() == "" || $("#pass_login").val() == "")
$("div#ack").html("please enter username or password");
else
$.post($("#frmLogin").attr("action"),
$("#frmLogin :input").serializeArray(),
function(data) {
var datas = $.trim(data); //remove whitespaces if any
if (datas == "success") {
window.location.href = "register.php"; //redirect
} else {
$("div#ack").html('<div class="alert alert-danger text-center" role="alert">Enter correct email or password!</div>'); //show error message
}
});
$("#frmLogin").submit(function() {
return false;
});
});