Javascript 使用PHP和Ajax重新加载和重定向页面

我有一个使用php的注册表单，我使用验证检查输入，并使用ajax控制提交表单

一切正常，除了单击submit按钮后，Ajax以相同的注册表单加载成功结果，并且不重新加载页面和重定向

我想使用Ajax表单submit重新加载并重定向

register.php

页面到

register.php？action=joined

在Ajax register.php拥有自己的语句之前，如果注册成功（

$\u GET['action']=='joined'

）*它将重定向并销毁注册表单并显示成功表单*

请参考代码。有人能帮我解决这个问题吗

registercontrol.php

<?php

if(isset($_POST['fullname'])){
    //fullname validation
    $fullname = $_POST['fullname'];

    if (! $user->isValidFullname($fullname)){
        $infofn = 'Your name must be alphabetical characters';      
        echo '<p>'.$infofn.'</p>';
    }       
}

// If form has been submitted process it
if(isset($_POST['submit']) && $_POST['submit'] == 'register')
{   

    // Create the activasion code
    $activasion = md5(uniqid(rand(),true));
    
    try 
    {

        // Insert into database with a prepared statement
        $stmt = $db->prepare('INSERT INTO members (fullname) VALUES (:fullname, :email, :active)');
        $stmt->execute(array(
            ':fullname' => $fullname,           
            ':email' => $email,
            ':active' => $activasion
        ));
        $id = $db->lastInsertId('memberID');

        // Send email
        $to = $_POST['email'];
        $subject = "Verify Your Account";
        $body = "<p>Thank you for registering on the demo site.</p>
        <p>Hello ".$fullname.", Please click this link to activate your account: <a href='".DIR."activate.php?x=$id&y=$activasion'>".DIR."activate.php?x=$id&y=$activasion</a></p>";

        $mail = new Mail();
        $mail->setFrom(SITEEMAIL);
        $mail->addAddress($to);
        $mail->subject($subject);
        $mail->body($body);
        $mail->send();

        // Redirect to index page
        header('Location: register.php?action=joined');
        exit;

    // Else catch the exception and show the error.
    } 
    catch(PDOException $e) 
    {
        $error[] = $e->getMessage();
    }   
}
?>

register.php和ajax验证

<script type="text/javascript">
    $(document).ready(function() {

        $("#fullname").keyup(function(event) {
            event.preventDefault();
            var fullname = $(this).val().trim();
            if(fullname.length >= 1) {
                $.ajax({
                    url: 'registercontrol.php',
                    type: 'POST',
                    data: {fullname:fullname},
                    success: function(response) {
                    // Show response
                    $("#vfullname").html(response);
                    }
                });
            } else {
                $("#vfullname").html("");
            }
        });     

        $('#submit').click(function(event) {
            event.preventDefault();
            var formData = $('#register-form').serialize();
            console.log(formData);
            $.ajax({
                url: 'registercontrol.php',
                method: 'post',
                data: formData + '&submit=register'
            }).done(function(result) {
                $('.hidden').show();
                $('#result').html(result);              
            })
        });                 

    });
</script>

<?php
    // If action is joined show sucesss
    if(isset($_GET['action']) && $_GET['action'] == 'joined')
    {                               
        echo '<div>
                <p>Registration is successful, please check your email to activate your account.</p>                                                
                </div>';                                    
    } 
    else 
    { ?>
        <div>
            <h1>Create an Account!</h1>                                 
        </div>
        <form id="register-form" role="form" method="post" 
        action="registercontrol.php" autocomplete="off">                                
                                            
        <input type="text" name="fullname" id="fullname" placeholder="Your name" value="" required>                                     
        <div id="vfullname"></div>                      
        <input type="email" name="email" id="email" placeholder="Your Email" value="" required>
                                                                
        <input id="submit" type="submit" name="submit" value="Create Account">

        <p class="hidden">Please check everything.</p>                              
        <div id="result"></div>
    </form>
<?php } ?>

$（文档）.ready（函数（）{
$（“#全名”）.keyup（函数（事件）{
event.preventDefault（）；
var fullname=$（this.val（）.trim（）；
如果（fullname.length>=1）{
$.ajax({
url:'registercontrol.php'，
键入：“POST”，
数据：{fullname:fullname}，
成功：功能（响应）{
//表示回应
$（“#vfullname”）.html（回复）；
}
});
}否则{
$（“#vfullname”）.html（“”）；
}
});     
$（“#提交”）。单击（函数（事件）{
event.preventDefault（）；
var formData=$（“#寄存器形式”）.serialize（）；
console.log（formData）；
$.ajax({
url:'registercontrol.php'，
方法：“post”，
数据：formData+“&submit=register”
}).完成（功能（结果）{
$（'.hidden'）.show（）；
$（'#result'）.html（result）；
})
});                 
});
创建一个帐户！
请检查所有内容。

---

谢谢。

检查

done

块并使用JavaScript执行重定向：

$('#submit').click(function(event){
        event.preventDefault();
        var formData = $('#register-form').serialize();
        console.log(formData);
        $.ajax({
            url: 'registercontrol.php',
            method: 'post',
            data: formData + '&submit=register'
        }).done(function(result){
            var url_to_redirect = "register.php?action=joined";
            window.location.href = url_to_redirect;
        })
    });

---

检查

done

块并使用JavaScript执行重定向：

$('#submit').click(function(event){
        event.preventDefault();
        var formData = $('#register-form').serialize();
        console.log(formData);
        $.ajax({
            url: 'registercontrol.php',
            method: 'post',
            data: formData + '&submit=register'
        }).done(function(result){
            var url_to_redirect = "register.php?action=joined";
            window.location.href = url_to_redirect;
        })
    });

---

header

函数仅重定向ajax调用（使ajax调用产生来自header的内容重定向）。您将希望像json对象一样返回，ajax将使用json对象在成功回调中进行重定向。为什么不在JS的ajax表单成功中使用

窗口进行重定向？您必须在JavaScript中进行重定向。
header
函数仅重定向ajax调用（使ajax调用导致来自标题的内容重定向）。您将希望像json对象一样返回，ajax将使用该对象在成功回调中执行重定向。为什么不使用JS的ajax表单上的
window.location
进行重定向？您必须在JavaScript中执行重定向。我这样做了，但它通过了全名验证，并且直接显示了成功消息，而不需要进行任何更改提交数据。然后你需要处理会话，一旦创建了一个帐户，创建了一个会话，一旦你的页面调用action=join，它应该有该帐户的会话信息。事实上，你需要显示你处理register.php的GET请求的代码。你必须在done函数中包含window.location.href，如这里所述。@Ulrich根据这个答案，一旦ajax调用成功，它将使用window.location重定向页面，随后您的成功消息将显示在新页面上。我这样做了，但它通过了全名验证，并直接显示成功消息，而没有真正提交数据。然后，您需要处理会话，一旦创建了帐户，就可以session，一旦你的页面被action=join调用，它应该有该帐户的会话信息。事实上，你需要显示你处理register.phpy的GET请求的代码。你必须在done函数中包含window.location.href，如这里所述。@Ulrich根据这个答案，一旦ajax调用成功，它将重读使用window.location访问页面，随后您的成功消息将显示在新页面上。