AJAX向目标URL提交POST数据报错，跳转后参数无法传到PHP页面如何解决？

报错原因 #

你最初版本的代码存在事件绑定语法错误：$('#continuebutton').on("click", location.href = "detailselection.php") 中，on方法的第二个参数需要传入事件触发时才执行的回调函数，你直接写了location.href赋值语句，会导致代码执行到这一行时就立刻触发页面跳转，此时AJAX请求还未完成，浏览器直接中断了未完成的请求，就会出现你看到的报错。

跳转后拿不到参数的原因 #

你对AJAX配置项中url的理解是正确的，该参数就是接收POST数据的目标页面。而跳转后拿不到参数是因为：AJAX的POST请求和后续window.location触发的页面跳转是两个完全独立的HTTP请求，POST参数仅存在于第一次AJAX请求中，跳转后的GET请求不会携带前一次请求的POST数据，因此PHP无法读取到对应参数。

可行解决方案 #

方案1：使用表单提交跳转（最简便） #

不需要使用AJAX，直接通过表单POST提交同时触发页面跳转：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<form id="jumpForm" action="detailselection.php" method="POST">
    <input type="hidden" name="idsarray" id="idsarrayInput">
    <button type="submit" id="continuebutton">继续</button>
</form>
<script>
if (sessionStorage.getItem('idsarray') !== '') {
    let string = sessionStorage.getItem('idsarray');
    const array = string.split(",");
    array.shift();
    // 数组转JSON字符串存入隐藏域
    $('#idsarrayInput').val(JSON.stringify(array));
}
</script>

PHP端接收代码：

// detailselection.php中读取参数
$idsarray = json_decode($_POST['idsarray'], true);

方案2：结合Session存储参数 #

如果一定要用AJAX，可以在第一次请求时将数据存入服务端Session，跳转后从Session读取：
前端代码：

$('#continuebutton').on("click", function () {
    let string = sessionStorage.getItem('idsarray');
    const array = string.split(",");
    array.shift();
    $.ajax({
        type: "POST",
        url: "detailselection.php",
        data: { 
            idsarray : JSON.stringify(array),
            save_session: 1
        },
        success: function() {
            window.location = "detailselection.php";
        }
    });
})

PHP端代码：

// detailselection.php
session_start();
// 处理AJAX存Session的请求
if (isset($_POST['save_session'])) {
    $_SESSION['idsarray'] = json_decode($_POST['idsarray'], true);
    exit;
}
// 跳转后读取Session中的数据
$idsarray = $_SESSION['idsarray'] ?? [];

内容的提问来源于stack exchange，提问作者Sam Holland