如何将jQuery获取的行ID传入Bootstrap模态框并在PHP函数中使用

DevOps 小满

2026-4-29

解决Bootstrap模态框中传递客户端ID给PHP函数的问题

我明白你的困扰——你已经成功用jQuery拿到了行ID并显示在模态框里，但因为PHP是服务器端语言，页面加载时就已经执行完毕，直接在模态框里调用selectedTranslation函数是拿不到客户端后来设置的ID的。下面给你一个可行的解决方案：

核心问题分析

PHP运行在服务器端，当页面第一次加载时，<?php selectedTranslation($dbh, $ids); ?>这段代码就已经执行了，这时候$ids根本还没有值（因为ID是用户点击链接后才通过JS获取的）。所以我们需要用AJAX来实现客户端和服务器端的动态交互，在模态框弹出时，把ID传给PHP，再把PHP返回的内容插入到模态框里。

具体实现步骤

1. 修改Bootstrap模态框代码

把原来直接调用PHP函数的地方换成一个空容器，用来接收AJAX返回的内容：

<!-- 更新记录模态框 -->
<div class="modal fade" id="updateModal" tabindex="-1" aria-labelledby="updateModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="updateModalLabel">Update Translation</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="translation.php" id="modal_form" method="post">
                <!-- 可以保留这个ID显示，或者去掉 -->
                <div id="sid"></div>
                <div class="modal-body">
                    <!-- 新增这个容器，用来放PHP返回的内容 -->
                    <div id="translation-content"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" name="update" class="btn btn-primary">Save changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

2. 调整jQuery代码，添加AJAX请求

在拿到ID后，发起AJAX请求，把ID传给PHP，然后把返回的HTML插入到模态框的容器里：

$(document).ready(function() {
    $("a[data-target='#updateModal']").click(function(e){
        e.preventDefault(); // 阻止默认的链接跳转行为
        var hrefs = $(this).attr("href");
        $("#modal_form").attr('action',hrefs);
        var ids = hrefs.split("=").pop();
        $("#sid").html(ids);
        
        // 新增AJAX请求
        $.ajax({
            url: 'get_selected_translation.php', // 可以是单独的PHP文件，或者当前页面的处理逻辑
            type: 'GET',
            data: { sid: ids }, // 把ID传过去
            success: function(response) {
                // 把返回的HTML插入到容器里
                $("#translation-content").html(response);
            },
            error: function() {
                $("#translation-content").html("加载失败，请重试");
            }
        });
    });
});

3. 创建处理AJAX请求的PHP文件（或调整现有代码）

比如创建get_selected_translation.php，里面处理ID参数并调用你的函数：

<?php
// 这里需要引入你的数据库连接和函数定义
include 'your_db_connection.php';
include 'your_functions.php';

if(isset($_GET['sid'])) {
    $sid = $_GET['sid'];
    // 调用selectedTranslation函数，注意要把输出直接返回给AJAX
    selectedTranslation($dbh, $sid);
}

// 确保你的selectedTranslation函数是直接输出HTML，而不是包含多余的内容
function selectedTranslation($dbh, $sid){
    // 注意修改SQL语句，加入WHERE条件来筛选对应ID的记录
    $sqlSelect = "SELECT * FROM xxxx WHERE sid = ?"; 
    // 用预处理语句防止SQL注入！
    $stmt = mysqli_prepare($dbh, $sqlSelect);
    mysqli_stmt_bind_param($stmt, "i", $sid);
    mysqli_stmt_execute($stmt);
    $result = mysqli_stmt_get_result($stmt);
    ?>
    <table>
    <?php while ($row = mysqli_fetch_array($result)) { ?>
    <tr>
        <td><input type="text" class="form-control" value="<?php echo htmlspecialchars($row['swrd_text']) ?>" readonly="readonly"></td>
        <td><input type="text" class="form-control" value="<?php echo htmlspecialchars($row['swrd_context']) ?>" ></td>
    </tr>
    <?php }?>
    </table>
<?php }
?>

额外注意事项

SQL注入防护：一定要用预处理语句（上面代码里的mysqli_prepare），不要直接把$sid拼到SQL里，避免安全问题。
HTML转义：用htmlspecialchars()转义输出的内容，防止XSS攻击。
如果不想单独创建PHP文件，也可以在translation.php里添加判断，比如如果是AJAX请求就返回函数的输出，否则正常显示页面。

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