使用PHP+AJAX点击按钮更新数据库单条记录及实时刷新问题

一、多按钮绑定对应数据库条目实现精准更新 #

1. 修正按钮HTML代码 #

你当前按钮用了固定id submitbtn，HTML中id必须唯一，多个按钮需改用class绑定，同时给每个按钮增加data-id属性存储对应数据库条目的ID，按钮随列表循环输出的部分代码修改如下：

<!-- 循环输出每个条目对应的按钮 -->
<button type="button" class="btn btn-success submitbtn" data-id="<?php echo $对应条目的id字段; ?>">UPDATE</button>

2. 修正jQuery绑定逻辑 #

改用class选择器绑定点击事件，原获取data-id的逻辑可以保留，同时增加对应徽章的状态更新逻辑：

$('.submitbtn').on('click', function(){
    var id = $(this).data('id');
    var $targetBadge = $('.updatedicon[data-id="'+id+'"]'); // 提前匹配对应条目的状态徽章
    $.ajax({
        url: 'includes/updatequery.php',
        type: 'POST',
        data: {id:id},
        success: function(data){
            if (data) {
                console.log("updated");
                // 直接更新对应徽章状态，无需刷新页面
                $targetBadge.text('completed').removeClass('badge-danger').addClass('badge-success');
            } else {
                $('#error').load("custom/static/error.html");
            }
        },
        error: function(jqXHR, textStatus, errorThrown){
            $('#error').html("oops" + errorThrown);
        }
    });
});

3. 修正更新接口PHP代码 #

原代码SQL语句WHERE id=id会导致全表所有数据被更新，同时没有接收前端传递的ID，还存在SQL注入风险，修改如下：

<?php
include("src/db.php");
// 接收POST传递的ID，做基础校验
$id = isset($_POST['id']) ? intval($_POST['id']) : 0;
if($id <= 0){
    echo 0;
    exit;
}
// 用预处理语句防注入，同步更新job和status字段和前端判断逻辑对应
$stmt = mysqli_prepare($conn, "UPDATE mytable SET job='completed', status='completed' WHERE id=?");
mysqli_stmt_bind_param($stmt, "i", $id);
$res = mysqli_stmt_execute($stmt);
echo $res ? 1 : 0;
?>

二、前端状态实时刷新修正 #

1. 修正菜单项徽章代码 #

原徽章用了固定id updatedicon，多个条目id重复无法定位对应元素，修改为带data-id的class：

<?php 
foreach($data as $d) {
    $id = $d['id'];
    $mystatus = $d['status'];
?>
<li class="nav-item">
    <a class="nav-link clickable blueMenuItem" id="nav-location" data-id="<?php echo $d['id']; ?>">
        <i class="nav-icon fas <?php echo $d['icon']; ?>"></i>
        <p><?php
            echo $d["title"];
            if ($d['type'] == "job") { ?>
                <!-- 改id为class，增加data-id属性匹配对应条目 -->
                <span class="right badge updatedicon <?php if($mystatus == "completed"){echo "badge-success";} else {echo "badge-danger";}?>" data-id="<?php echo $id; ?>">
                    <?php setJob($con, $id)?>
                </span><?php
            } ?>
        </p>
    </a>
</li><?php
}
?>

2. 修正setJob函数参数错误 #

原函数参数名是$idd，SQL语句里误用了$id导致无法查询到数据，同时增加预处理逻辑防注入：

<?php
function setJob($con, $id) { // 把参数名从$idd改成$id，和SQL语句变量对应
    $sql = "SELECT status FROM mytable WHERE id=?";
    $stmt = mysqli_prepare($con, $sql);
    mysqli_stmt_bind_param($stmt, "i", $id);
    mysqli_stmt_execute($stmt);
    $result = mysqli_stmt_get_result($stmt);
    $row = mysqli_fetch_assoc($result);
    return $row ? $row['status'] : 'not completed';
}
?>

修改后点击对应UPDATE按钮，只会更新对应ID的数据库条目，同时前端对应条目的状态徽章会自动切换为完成状态，不需要刷新整个页面。

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