$.post() 可能的竞争条件；重定向问题

Question

我有一个 index.php 页面，我想从 textArea 中的用户那里接收信息，点击保存后，变量应该 post 编辑到另一个名为 [=38 的页面=].一旦 post 变量被设置到另一个页面上，changePage.inc.php 应该从原来的 index.php 重定向到一个名为 secondPage.php.

的页面

index.php 上 jquery 中的变量 -> 与 changePage.inc.php 上的 post 相同的变量 -> 按照 changePage.inc.php

的指示，用户从 index.php 重定向到 secondPage.php

文件名为 index.php

<?php
    session_start();
?>

<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous">
</script>
<script>
    $(document).ready(function(){
        $('#saveForm').submit(function(event){
            event.preventDefault();
            var message = "";

            var changeText = function(){
                message = "You wrote: " + $('#text').val();
            };

            var send = function(){
                if(message !== ""){
                    $.post("includes/changePage.inc.php", {message: message});
                    window.location.href = "includes/changePage.inc.php";
                }
            };

            changeText();
            send();
        });
    });
</script>
<body>
<textArea id="text"></textArea>
<form id="saveForm" action="includes/changePage.inc.php" method="POST">
  <button type="submit" id="saveButton">Save!</button>    
</form>
</body>
</html>

文件名changePage.inc.php

<?php

session_start();

if(isset($_POST['message'])){
    header("Location: ../secondPage.php");
}

exit();

文件名为 secondPage.php

<?php
    echo 'Hello World';
?>

使用现在的代码，它到达 changePage.inc.php，但不是 secondPage.php。我相信 post 变量要么根本没有设置，要么设置得太晚（可能是因为竞争条件）。

我之前问过这个问题，我认为在 $.post() 方法中使用 function(data) 来创建一个带有 $.parseJSON(data) 的对象的答案是可行的。但是在运行代码上，产生了错误，所以现在我再次询问。这是之前的尝试：POST variable from jquery redirecting but is not set

Answer 1

触发AJAX请求后不要离开页面，使用回调等待结果。

$.post("includes/changePage.inc.php", {message: message}, function (data) {
    // here you see 'Hello World' in your browser console
    console.log(data);
    // here you don't see anything in your browser window because it is no POST
    window.location.href = "includes/changePage.inc.php";
});

但是为什么触发一个ajax请求然后重定向到同一页面...

也许这就是我们的意图（第二次尝试）：

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"
        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
        crossorigin="anonymous">
    </script>
  </head>
  <body>
    <script>
$(document).ready(function(){
    $('#saveForm').submit(function(event){
        // NO: event.preventDefault();
        var message = "";

        var changeText = function(){
            message = "You wrote: " + $('#text').val();
        };

        changeText();

        // Check for text as message can't be empty here
        if (!$('#text').val()){
            // preventDefault() here if text is empty
            event.preventDefault();
        }
    });
});
    </script>
    <form id="saveForm" action="includes/changePage.inc.php" method="POST">
      <!-- put textarea inside your form, and write tags in lowercase -->
      <textarea id="text"></textarea>
      <button type="submit" id="saveButton">Save!</button>    
    </form>
  </body>
</html>

Answer 2

重定向到 Javascript 中的 secondPage.php，而不是 PHP。并在 $.post 的回调函数中执行，等待脚本完成。

        var send = function(){
            if(message !== ""){
                $.post("includes/changePage.inc.php", {message: message}, function() {
                    window.location.href = "includes/secondPage.php";
                });
            }
        };

但更简单的方法是在表单中添加 message 作为输入，然后让表单正常提交。

$("#saveForm").submit(function() {
  $("#message").val("You wrote: " + $("#text").val());
}

<textArea id="text"></textArea>
<form id="saveForm" action="includes/changePage.inc.php" method="POST">
  <input type="hidden" name="message" id="message">
  <button type="submit" id="saveButton">Save!</button>    
</form>

$.post() 可能的竞争条件；重定向问题

$.post() possible race condition; issues with redirect

php

jquery

redirect

json

race-condition