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

时间:2018-07-06 04:52:06

标签: javascript php jquery ajax

我正在使用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>

1 个答案:

答案 0 :(得分:2)

我谈论的方法与此类似

$(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();