在表单上使用 jQuery 的 preventDefault() 后如何使用 PHP 重定向用户？

Question

我正在使用 jQuery、AJAX 和 PHP 来验证我网站上的大多数表单。实际的输入验证是通过 PHP 完成的（我认为这将最好防止用户使用浏览器源代码检查器来编辑脚本来绕过验证），但我使用 jQuery 和 AJAX 将错误加载到表单提交下方的错误消息 div按钮。

所有这些都可以正常工作，但是当表单成功提交后，我想调用header('Location: foo.php') 将我的用户发送回某个页面。但是，由于我使用的是preventDefault()，因此我的新页面正在加载到错误消息 div 中，这使得浏览器窗口看起来像是有两个页面重叠在一起（当前 url 也没有改变）。

有解决办法吗？我想我可能可以通过在 PHP 代码完成后包含一个脚本来取消绑定 PHP 文件中的事件，但我没有成功。

jQuery:

$(document).ready(function() {
  $("form").submit(function(event) {
    event.preventDefault();

    var url = window.location.href.toString().split("=");
    var id = url[1];

    var title = $("#title").val();
    var content = $("#content").val();
    var submit = $("#submit").val();

    //this is where the PHP is loading the new page, along with error messages
    $(".form-message").load("/php/_create.thread.php", {
      title: title,
      content: content,
      id: id,
      submit: submit
    });
  });
});

PHP 文件结束：

<?php
    //if successful, exit the script and go to a new page
    $submissionSuccessful = true;
    exit(header('Location: /index.php'));
?>

<reference path="/javascript/jquery-3.3.1.min.js"></reference>
<script type="text/javascript">

var submissionSuccessful = "<?php echo $submissionSuccessful; ?>";

if (submissionSuccessful)
{
    $("#title, #content").css(
    {
        "border": "2px solid #24367e"
    }
        );

    $("#title, #content").val("");
}

</script>

Answer 1

我讲的方法和这个差不多

$(document).ready(function () {
    $("form").submit(function(event) {
        event.preventDefault();
        var url = window.location.href.toString().split("=");
        var id = url[1];
        var title = $("#title").val();
        var content = $("#content").val();
        var submit = $("#submit").val();
        // AJAX POST request to PHP
        $.post("/php/_create.thread.php", {
            title: title,
            content: content,
            id: id,
            submit: submit
        }).done(function (response) {
            // response is a JSON document
            if (response.error) {
                // Here you basically modify the UI to show errors
                $(".form-message").text(response.error)
            } else {
                // Here you basically modify the UI to show success
                $("#title, #content").css({ "border": "2px solid #24367e" });
                $("#title, #content").val("");
                location.href = '/index.php' // REDIRECT!
            }
        });
    });
});

在服务器端

<?php
if ($someSuccessCondition) {
    $response = ['success' => true];
} else {
    $response = ['error' => 'The Error Message'];
}
echo json_encode($response);
exit();