为什么我的错误样式和ajax重定向不起作用?

时间:2017-06-08 20:48:57

标签: php jquery ajax

我的注册表单工作正常,因为signup.inc.php文件正在传递和检查数据,但在视觉上它没有显示错误样式,并且在成功验证表单并添加用户之后,它没有将用户重定向到profile.php。任何人都可以帮我理解吗?提前致谢。

的index.php:

<?php
session_start();
include 'dbh.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.1/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();

                $.ajax({
                    url: 'include/signup.inc.php',
                    type: 'POST',
                    data: {first: first, last: last, email: email, pwd: pwd, submit: submit},
                    dataType: 'json',
                    success: function(respond){

                    if(!respond.status)
                    {
                        alert(respond.message);
                    }
                    else
                        Window.Location.href = respond.redirect;
                    }
        });  
    });
});



</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>

signup.inc.php:

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

    $respond = array(
    'status'   => true,
    'message'  => 'There was an error',
    'redirect' => '../profile.php'
);


if (isset($_POST['submit'])) {

    $first = $_POST['first'];
    $last = $_POST['last'];
    $email = $_POST['email'];
    $pwd = $_POST['pwd'];

    $errorEmpty = false;
    $errorEmail = false;



if (empty($first) || empty($last) || empty($email) || empty($pwd)) {
    echo "<span class='signup-error'>Please fill out all fields!</span>";
    $errorEmpty = true;
    }

elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
    echo "<span class='signup-error'>Please enter a valid email address!</span>";
    $errorEmail = true;
    } 


else {
    $sql = "SELECT email FROM user WHERE email='$email'";
    $result = mysqli_query($conn, $sql);
    $emailcheck = mysqli_num_rows($result);



if ($emailcheck > 0) {
    echo "<span class='signup-error'>That email address already exists!</span>";
    $errorEmail = true;
    echo json_encode($respond);
    }



else {
    $encryptpwd = password_hash($pwd, PASSWORD_DEFAULT);
    $sql = "INSERT INTO user (first, last, email, pwd)
    VALUES ('$first', '$last', '$email', '$encryptpwd')";
    $result = mysqli_query($conn, $sql);
    }

}
}
?>


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

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

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

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

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

 </script>

1 个答案:

答案 0 :(得分:0)

因此,您只能将完整的脚本转储回ajax请求并期望它能够正常工作。该请求由ajax函数处理,而不仅仅粘贴在当前页面的底部。

在您的情况下,您的脚本可以移动到主index.php并由ajax回调函数调用。例如:

if(!respond.status)
{
    alert(respond.message);
    showErrors(respond.errorEmpty, respond.errorEmail);
}

以上假设了几件事。首先,您可以将当前脚本略微更改为可调用函数,即:

function showErrors(errorEmpty, errorEmail) {
    $("#signup-first, #signup-last, #signup-email, #signup-pwd").removeClass("input-error");

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

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

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

现在这个showErrors函数可以放在你的主index.php脚本中,这样ajax函数就可以根据需要调用它。

其次,它假设您将php中的$errorEmpty$errorEmail变量传递回响应中的ajax请求,类似于其他响应变量。类似的东西:

$respond = array(
    'status'   => true,
    'message'  => 'There was an error',
    'redirect' => '../profile.php',
    'errors',
);

if (empty($first) || empty($last) || empty($email) || empty($pwd)) {

    $respond['errors'][] = "Please fill out all fields!";
    $respond['errorEmpty'] = true;

} elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {

    $respond['errors'][] = "Please enter a valid email address!";
    $respond['errorEmail'] = true;

} else {

    $sql = "SELECT email FROM user WHERE email='$email'";
    $result = mysqli_query($conn, $sql);
    $emailcheck = mysqli_num_rows($result);

    if ($emailcheck > 0) {
        $respond['errors'][] = "That email address already exists!";
        $respond['errorEmail'] = true;

        echo json_encode($respond);

    } 

现在您可以将respond.errorEmpty传递给错误处理函数。