如何将HTML元素dialog_title中的变量传递给PHP处理？

因为JS运行在客户端浏览器，PHP运行在服务器端，必须通过HTTP请求完成前后端的数据传递，以下是几种实用方案：

1. 隐藏表单提交（同步跳转） #

在页面中添加包含隐藏字段的表单，通过JS把dialog_title的内容赋值给隐藏字段，再提交表单到PHP脚本。

修改后的HTML #

<h1 id="dialog_title"></h1>
<!-- 新增隐藏表单 -->
<form id="submitForm" action="your_process.php" method="POST">
  <input type="hidden" id="hidden_id" name="passed_id">
</form>

修改后的JS代码 #

function dialogOeffnen(id) {
    // 显示ID到页面
    document.getElementById("dialog_title").innerText = id;
    // 打开弹窗
    document.getElementById("loslegen-dialog").classList.add("sichtbar");
    document.getElementById("body-overlay").classList.add("sichtbar");
    
    // 将值赋值给隐藏字段，准备提交
    document.getElementById("hidden_id").value = id;
}

// 弹窗确认按钮点击时执行提交
function submitToPHP() {
    document.getElementById("submitForm").submit();
}

PHP处理代码（your_process.php） #

<?php
if(isset($_POST['passed_id'])) {
    $received_id = $_POST['passed_id'];
    // 后续处理逻辑，比如存入数据库、业务计算等
    echo "收到的ID：" . $received_id;
}
?>

2. AJAX异步请求（无刷新推荐方案） #

用JS的fetch发送异步请求，不用刷新页面就能把数据传给PHP，还能接收处理后的结果。

JS代码 #

function dialogOeffnen(id) {
    document.getElementById("dialog_title").innerText = id;
    document.getElementById("loslegen-dialog").classList.add("sichtbar");
    document.getElementById("body-overlay").classList.add("sichtbar");
}

// 弹窗确认时发送请求
function sendToPHP() {
    const id = document.getElementById("dialog_title").innerText;
    fetch('your_process.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'passed_id=' + encodeURIComponent(id)
    })
    .then(response => response.text())
    .then(data => {
        // 处理PHP返回的结果
        console.log('服务器返回：', data);
        // 比如关闭弹窗、提示操作成功
        document.getElementById("loslegen-dialog").classList.remove("sichtbar");
        document.getElementById("body-overlay").classList.remove("sichtbar");
    })
    .catch(error => {
        console.error('请求出错：', error);
    });
}

PHP处理代码（your_process.php） #

<?php
if(isset($_POST['passed_id'])) {
    $received_id = $_POST['passed_id'];
    // 执行业务逻辑
    echo "ID已接收，值为：" . $received_id;
} else {
    echo "未接收到ID参数";
}
?>

3. URL参数跳转（GET方式） #

把ID拼在URL里，跳转到PHP页面，PHP通过$_GET获取参数。

JS代码 #

function dialogOeffnen(id) {
    document.getElementById("dialog_title").innerText = id;
    document.getElementById("loslegen-dialog").classList.add("sichtbar");
    document.getElementById("body-overlay").classList.add("sichtbar");
}

// 跳转至PHP页面
function redirectToPHP() {
    const id = document.getElementById("dialog_title").innerText;
    window.location.href = 'your_process.php?passed_id=' + encodeURIComponent(id);
}

PHP处理代码（your_process.php） #

<?php
if(isset($_GET['passed_id'])) {
    $received_id = $_GET['passed_id'];
    echo "通过URL接收的ID：" . $received_id;
}
?>

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