Javascript 如何一起使用ajax和php重定向？_Javascript_Php_Jquery_Ajax

Javascript 如何一起使用ajax和php重定向？

javascript php jquery ajax

Javascript 如何一起使用ajax和php重定向？,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,我正在尝试将我的用户从登录页面重定向到配置文件。我正在使用ajax验证表单，但是当我成功登录时，它会在索引页面的顶部显示配置文件页面。如何在新页面中重定向到配置文件页面索引。php: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Yahbang</title> <link rel="stylesheet" type="t

我正在尝试将我的用户从登录页面重定向到配置文件。我正在使用ajax验证表单，但是当我成功登录时，它会在索引页面的顶部显示配置文件页面。如何在新页面中重定向到配置文件页面

索引。php:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Yahbang</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script>
        $(document).ready(function() {

            $("#signup-form").submit(function(event) {
                event.preventDefault();
                var first = $("#signup-first").val();
                var last = $("#signup-last").val();
                var email = $("#signup-email").val();
                var pwd = $("#signup-pwd").val();
                var submit = $("#signup-submit").val();
                $(".signup-message").load("include/signup.inc.php", {
                    first: first,
                    last: last,
                    email: email,
                    pwd: pwd,
                    submit: submit
                });
            });
        });

            $(document).ready(function() {

            $("#login-form").submit(function(event) {
                event.preventDefault();
                var email = $("#login-email").val();
                var pwd = $("#login-pwd").val();
                var submit = $("#login-submit").val();
                $(".login-message").load("include/login.inc.php", {
                    email: email,
                    pwd: pwd,
                    submit: submit
                });
            });
        });

</script>

</head>
<body>
<header>

    <div class="header_index">
            <div class="headerlogo">
                <nav>
                    <ul>
                        <li><a href="index.php">Yahbang</a></li>
                    </ul>
                </nav>
            </div>


                <form id="login-form" class="loginform" action='include/login.inc.php' method='POST'>
                        <input  id="login-email" type='text' name='email' placeholder='Email'>
                        <input  id="login-pwd" type='password' name='pwd' placeholder='Password'>
                        <p><a href="forgotpassword.php">Forgot Password</a></p>
                        <button id="login-submit" type='submit'>Login</button>
                        <p class="login-message"></p>
                    </form>



</header>


                <form id="signup-form" class="signup" action='include/signup.inc.php' method='POST'>
                    <input id="signup-first" type='text' name='first' placeholder='First Name'><br>
                    <input id="signup-last" type='text' name='last' placeholder='Last Name'><br>
                    <input id="signup-email" type='text' name='email' placeholder='Email'><br>
                    <input id="signup-pwd" type='password' name='pwd' placeholder='Password'><br>
                    <button id="signup-submit" type='submit'>Sign Up</button>
                    <p class="signup-message"></p>
                </form>





<footer>
    <div class="footer_index">
    <nav>
        <ul>
            <li><a href="contact.php">Contact Us</a></li>
            <li><a href="TermsofUse.php">Terms of Use</a></li>
        </ul>
    </nav>
    </div>
</footer>
</body>
</html>


雅邦
$（文档）.ready（函数（）{
$（“#注册表格”）。提交（功能（事件）{
event.preventDefault（）；
var first=$（“#先注册”）.val（）；
var last=$（“#最后一次注册”）.val（）；
var email=$（“#注册电子邮件”）.val（）；
var pwd=$（“#注册pwd”）.val（）；
var submit=$（“#注册提交”）.val（）；
$（“.signup message”）.load（“include/signup.inc.php”{
第一:第一,，
最后:最后,，
电邮:电邮,，
pwd:pwd，
提交：提交
});
});
});
$（文档）.ready（函数（）{
$（“#登录表单”）.submit（函数（事件）{
event.preventDefault（）；
var email=$（“#登录电子邮件”）.val（）；
var pwd=$（“#登录pwd”）.val（）；
var submit=$（“#登录提交”）.val（）；
$（“.login message”）.load（“include/login.inc.php”{
电邮:电邮,，
pwd:pwd，
提交：提交
});
});
});




登录









注册

<?php
session_start();
include '../dbh.php';

if (isset($_POST['submit'])) {
$email = $_POST['email'];
$pwd = $_POST['pwd'];

$sql = "SELECT * FROM user WHERE email='$email'";
$result = $conn->query($sql);
$row = $result->fetch_assoc();
$hash_pwd = $row['pwd'];
$hash = password_verify($pwd, $hash_pwd);

    $errorEmpty = false;
    $errorEmail = false;

if ($hash == 0) {
    echo "<span class='login-error'>Your Email or password is incorrect!</span>";
    $errorEmpty = true;

} else {
    $sql = "SELECT * FROM user WHERE email='$email' AND pwd='$hash_pwd'";
    $result = $conn->query($sql);


    if (!$row = $result->fetch_assoc()) {
        echo "<span class='login-error'>Your Email or password is incorrect!</span>";
        $errorEmpty = true;
    } 

else {
        $_SESSION['id'] = $row['id'];
            header("Location: ../profile.php");
}
}

}

?>



<script> 
$("#login-email, #login-pwd").removeClass("input-error");

    var errorEmpty = "<?php echo $errorEmpty; ?>";
    var errorEmail = "<?php echo $errorEmail; ?>";

 if (errorEmpty == true) {
  $("#login-email, #login-pwd").addClass("input-error");
 }

 if (errorEmail == true) {
  $("#login-email").addClass("input-error");
 } 

 if (errorEmpty == false && errorEmail == false) {
  $("#login-email, #login-pwd").val("");
}

 </script>


$（“#登录电子邮件，#登录密码”）.removeClass（“输入错误”）；
var errorEmpty=“”；
var errorEmail=“”；
if（errorEmpty==true）{
$（“#登录电子邮件，#登录密码”）.addClass（“输入错误”）；
}
如果（errorEmail==true）{
$（“#登录电子邮件”）.addClass（“输入错误”）；
} 
if（errorEmpty==false&&errorEmail==false）{
$（“#登录电子邮件，#登录密码”）.val（“”）；
}
你应该考虑多个注释来做这件事。
将所有响应收集到一个数组中

您应该创建一个数组，并将要响应的数据放在那里。例如：
$respond = array(
    'status'   => false,
    'message'  => 'Message Seen By User',
    'redirect' => 'Destination URL'
);

无论何时处理请求，都应该更改这些索引。例如，如果身份验证成功，请将状态更改为true
并将重定向到目标url
等。最终，当您处理所有内容时，不要使用任何标题
或回送
，最后将数组转换为json并回送：
echo json_encode($response);  

重构你的JS

不要使用多个$（document）。准备好将其用于您想要的每个事件。例如：
$(document).on('submit', '.login-message', function(){
    //Write Event Handling Here
});

使用JQuery AJAX

使用ajax代替加载：
$.ajax({
    url: 'url/to/php',
    type: 'POST',
    data: {email: email, pwd: pwd, submit: submit},
    dataType: 'json',
    success: function(respond){
        if(!respond.status)
        {
            //Show respond.message to user
        }
        else
            Window.Location.href = respond.redirect;
    }
});  

或使用JQuery加载

对此类请求使用load是不够合适的，但是：
$(".login-message").load("include/login.inc.php", {email: email, pwd: pwd, submit: submit}, function(response, status, xhr){
    respond = JSON.parse(response);
    if(!respond.status)
    {
        //Show respond.message to user
    }
    else
        Window.Location.href = respond.redirect;
});

首先，ajax不会重新加载页面，其次，在“Index.php”中的脚本中有两个现成的函数。为什么？我知道ajax不会重新加载页面。这就是ajax的目的，即在不重新加载页面的情况下刷新数据。我要问的问题是，如何重定向到另一个文件，而不让它加载到同一页面中当前文件的顶部。请告诉我该怎么做。我目前正在尝试学习。如果您想使用ajax验证登录，您应该等待ajax响应，然后更改页面。一种方法是通过javascript window.location=”“location:../profile.php“非常感谢您的帮助。我仍在学习，这对我来说非常有价值。谢谢。最后一个问题很抱歉。您说了put echo json_encode（$response）；在末尾。这应该是在数组末尾还是在整个Valditing表单过程之后？当您没有任何其他要检查的内容时，$response