如何将JavaScript变量传入模态框中的PHP查询语句？

问题根源 #

你直接在PHP查询语句里写$('#vis_id')是无效的——PHP是服务器端语言，在页面加载时就执行完毕；而$('#vis_id')是客户端的jQuery代码，只有页面渲染到浏览器后才会运行。服务器端的PHP根本无法识别客户端的JS语法，所以这条查询实际是把字符串$('#vis_id')作为jvid的值去查询，自然得不到正确结果。

可行解决方案 #

方案1：通过AJAX动态获取数据（推荐） #

点击按钮时，先获取目标ID，再通过AJAX请求后端PHP接口传递ID，查询后返回结果渲染到模态框。

前端JS代码

$('.add_task').click(function() {
    // 获取目标ID：可以从按钮的data属性取，或页面元素的值
    var visId = $('#vis_id').val(); 
    // 若按钮带user_id，可改为 var visId = $(this).data('user-id');

    // 发送AJAX请求到后端接口
    $.ajax({
        url: 'get_job_data.php', // 后端处理查询的PHP文件
        type: 'POST',
        data: { jvid: visId }, // 传递ID参数
        success: function(response) {
            // 将返回的查询结果插入模态框的内容区域
            $('#modal-content-container').html(response);
            // 打开模态框
            $('#your-modal').modal('show');
        },
        error: function() {
            alert('数据加载失败');
        }
    });
});

后端PHP代码（get_job_data.php）

<?php
// 数据库连接（替换成你的实际连接信息）
$conn = new mysqli('localhost', 'db_username', 'db_password', 'db_name');
if ($conn->connect_error) {
    die('数据库连接失败: ' . $conn->connect_error);
}

// 校验并获取参数，防止SQL注入
if (isset($_POST['jvid']) && is_numeric($_POST['jvid'])) {
    // 使用预处理语句（更安全，避免注入）
    $stmt = $conn->prepare("SELECT job_desc FROM jobspervisit WHERE jvid = ? AND job_desc='Fumes'");
    $stmt->bind_param("i", $_POST['jvid']); // "i"表示参数为整数类型
    $stmt->execute();
    $result = $stmt->get_result();

    // 渲染查询结果为表格
    if ($result->num_rows > 0) {
        echo '<table border="1">';
        while ($row = $result->fetch_assoc()) {
            echo '<tr><td>' . htmlspecialchars($row['job_desc']) . '</td></tr>';
        }
        echo '</table>';
    } else {
        echo '<p>未找到匹配数据</p>';
    }

    $stmt->close();
} else {
    echo '<p>无效的ID参数</p>';
}

$conn->close();
?>

方案2：通过隐藏域传递ID（适用于模态框预渲染在页面内的场景） #

如果模态框是提前写在页面中的，可以在点击按钮时把ID存入模态框内的隐藏域，再通过表单提交或JS触发查询，但本质还是需要AJAX配合，不如方案1灵活。

示例：

$('.add_task').click(function() {
    var visId = $('#vis_id').val();
    // 将ID存入模态框的隐藏域
    $('#modal-hidden-jvid').val(visId);
    // 打开模态框
    $('#your-modal').modal('show');
});

之后模态框内的查询仍需通过AJAX读取隐藏域的值，再发送请求到后端，逻辑和方案1类似。

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