如何用Bootstrap+Ajax基于选中ID操作MySQL并修复更新首条记录问题

首先咱们来揪出问题的核心原因：你在循环生成每个Bootstrap Modal的时候，所有模态框里的输入框都用了相同的id="user_id"和id="full_name"。但HTML里的id是全局唯一的，当你用$("#user_id").val()获取值时，jQuery只会找到页面中第一个匹配这个id的元素，所以不管你打开哪个模态框，拿到的都是第一条记录的ID，自然只会更新第一条数据。

接下来咱们一步步修复这个问题：

步骤1：给模态框输入框添加唯一标识 #

把每个模态框里的输入框id改成和当前记录ID绑定的形式，确保每个输入框的id都是独一无二的。

修改后的edit_account.php模态框部分代码：

<div class = "modal-body">
    <input type = "text" id = "user_id_<?php echo $id; ?>" value = "<?php echo $id; ?>" class = "form-control" />
    <input type = "text" id = "full_name_<?php echo $id; ?>" value = "<?php echo $fn; ?>" class = "form-control" />
</div>

步骤2：修正Ajax的取值逻辑 #

在点击Update按钮的事件里，要获取当前模态框对应的输入框值，而不是全局的重复id。直接用绑定了记录ID的选择器来定位输入框即可。

修改后的script部分代码：

$("#update<?php echo $id; ?>").click(function() {
    // 用当前记录ID拼接输入框的唯一id
    var id = $("#user_id_<?php echo $id; ?>").val();
    var fn = $("#full_name_<?php echo $id; ?>").val();
    
    if (confirm("Are you sure you want update this record?")) {
        $.ajax({
            url: "edit_account_process.php",
            type: "POST",
            data: { userid: id, fullname: fn },
            success: function(data) {
                $("#showData").html(data);
                // 更新成功后自动关闭模态框
                $("#edit<?php echo $id; ?>").modal('hide');
            }
        });
    }
});

步骤3：修复SQL注入风险（重要优化） #

你的edit_account_process.php里直接把POST参数拼进SQL语句，存在严重的SQL注入风险。咱们用mysqli的预处理语句来修复，让代码更安全：

修改后的edit_account_process.php代码：

<?php
$cn = mysqli_connect("localhost","root","","testdb");

// 检查数据库连接是否成功
if (!$cn) {
    die("Connection failed: " . mysqli_connect_error());
}

$id = $_POST['userid'];
$fn = $_POST['fullname'];

// 使用预处理语句防止SQL注入
$sql = "UPDATE tblinfo SET fullname = ? WHERE userid = ?";
$stmt = mysqli_prepare($cn, $sql);
// "si"表示第一个参数是字符串，第二个是整数类型
mysqli_stmt_bind_param($stmt, "si", $fn, $id);

if (mysqli_stmt_execute($stmt)) {
    echo "<script>alert('Successfully updated!');</script>";
} else {
    echo "<script>alert('Unable to update the record!');</script>";
}

// 关闭预处理语句和数据库连接
mysqli_stmt_close($stmt);
mysqli_close($cn);
?>

额外优化建议：减少重复代码 #

可以把script部分移到循环外面，用事件委托的方式绑定点击事件，避免生成大量重复的script代码，让页面更简洁：

// 放在循环外面（比如页面底部）
$(document).on('click', '[id^="update"]', function() {
    // 从按钮id中提取记录ID
    var recordId = $(this).attr('id').replace('update', '');
    var id = $("#user_id_" + recordId).val();
    var fn = $("#full_name_" + recordId).val();
    
    if (confirm("Are you sure you want update this record?")) {
        $.ajax({
            url: "edit_account_process.php",
            type: "POST",
            data: { userid: id, fullname: fn },
            success: function(data) {
                $("#showData").html(data);
                $("#edit" + recordId).modal('hide');
            }
        });
    }
});

这样就不用在循环里重复生成每个按钮的点击事件代码了。

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