如何将JavaScript变量传递至PHP文件？

我有一个带JavaScript onclick事件的链接，点击时会从当前页面（比如a.php）获取HTML代码，传给script.js完成编辑，现在需要把编辑后的数据传递到目标PHP文件print_invoice.php。目前已经实现了从PHP向JavaScript传递数据并完成编辑，就差把编辑后的数据传给print_invoice.php了。

现有代码 #

a.php #

<td><a id="getinfo" href="print_invoice.php?invoice_id='.$invoiceDetails["order_id"].'" onclick="invoice_ajax('.count(getInvoiceItems($invoiceDetails["order_id"])).')" data-info="'.base64_encode($template).'" title="Print Invoice"><span class="glyphicon glyphicon-print"></span></a></td>

script.js #

var data = 'targetData';
     
var variableToSend = 'foo';
$.post('print_invoice.php', {variable: variableToSend});

print_invoice.php #

$variable = $_POST['variable'];

echo $variable;

问题分析 #

当前代码的核心问题是：点击链接时，onclick里的AJAX会发送POST请求，但链接本身会触发默认的GET跳转，导致print_invoice.php接收到的是GET请求参数，而非AJAX传递的POST数据，最终无法获取编辑后的数据。

解决方案 #

方案1：阻止默认跳转+Session存数据 #

1. 修改a.php的onclick事件

传递event参数用于阻止默认跳转：

<td><a id="getinfo" href="print_invoice.php?invoice_id='.$invoiceDetails["order_id"].'" onclick="invoice_ajax('.count(getInvoiceItems($invoiceDetails["order_id"])).', event)" data-info="'.base64_encode($template).'" title="Print Invoice"><span class="glyphicon glyphicon-print"></span></a></td>

2. 完善script.js的函数逻辑

阻止跳转并发送AJAX传递数据，成功后跳转到目标页面：

function invoice_ajax(itemCount, event) {
    // 阻止链接默认跳转行为
    event.preventDefault();

    // 替换为你实际编辑完成的数据
    var editedData = '这里是编辑后的目标数据';
    // 从链接中提取invoice_id
    var invoiceId = $('#getinfo').attr('href').split('invoice_id=')[1];

    // 发送POST请求传递数据
    $.post('print_invoice.php', {
        variable: editedData,
        invoice_id: invoiceId
    }, function(response) {
        // 数据传递成功后跳转到打印页面
        window.location.href = 'print_invoice.php?invoice_id=' + invoiceId;
    });
}

3. 修改print_invoice.php处理数据

用Session存储传递的编辑数据，确保跳转后能读取：

<?php
session_start();

// 处理AJAX传递的POST数据，存入Session
if (isset($_POST['variable'])) {
    $_SESSION['edited_invoice_data'] = $_POST['variable'];
    // 针对AJAX请求返回成功标识
    if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
        echo 'success';
        exit;
    }
}

// 获取invoice_id
$invoice_id = isset($_GET['invoice_id']) ? $_GET['invoice_id'] : '';
// 从Session读取编辑后的数据
$edited_data = isset($_SESSION['edited_invoice_data']) ? $_SESSION['edited_invoice_data'] : '';

// 这里编写发票打印逻辑，使用$edited_data和$invoice_id

// 测试输出编辑后的数据（实际替换为打印页面代码）
echo $edited_data;

// 清除Session数据，避免残留
unset($_SESSION['edited_invoice_data']);
?>

方案2：动态表单直接提交 #

如果不想用Session，可通过动态创建表单直接POST数据并跳转，无需AJAX：

function invoice_ajax(itemCount, event) {
    event.preventDefault();

    var editedData = '这里是编辑后的目标数据';
    var invoiceId = $('#getinfo').attr('href').split('invoice_id=')[1];

    // 创建隐藏表单
    var form = $('<form>', {
        method: 'POST',
        action: 'print_invoice.php'
    });
    // 添加编辑后的数据
    form.append($('<input>', {
        type: 'hidden',
        name: 'variable',
        value: editedData
    }));
    // 添加invoice_id
    form.append($('<input>', {
        type: 'hidden',
        name: 'invoice_id',
        value: invoiceId
    }));
    // 提交表单跳转
    form.appendTo('body').submit();
}

对应的print_invoice.php可直接读取POST数据：

<?php
$variable = isset($_POST['variable']) ? $_POST['variable'] : '';
$invoice_id = isset($_POST['invoice_id']) ? $_POST['invoice_id'] : '';

// 编写发票打印逻辑
echo $variable;
?>

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