使用AJAX从可编辑表单更新数据库失败，求代码排查

我帮你找出了代码里几个导致AJAX更新失败的关键问题，咱们一步步来修复：

核心问题分析 #

你的代码主要问题出在DOM元素选择错误，以及一些逻辑冗余，导致AJAX无法正确获取到编辑后的表单数据并提交。

具体错误与修正方案 #

1. 错误的字段选择器 #

PHP渲染的每个可编辑字段ID都是带对应故事ID的（比如tentruyen_1、tacgia_2），但你在JS里用$('#ttruyen')这种不带ID后缀的选择器，根本无法定位到当前行的对应字段，只会拿到页面中第一个匹配的元素值，甚至什么都拿不到。

修正方法：
根据点击的edit按钮拆分出的edit_id，拼接成正确的字段ID选择器，比如$('#tentruyen_' + edit_id)。

2. 无用的冗余变量 #

你定义了var value = $(this).text();，但这个变量是获取edit按钮的文本（也就是"edit"），完全用不上，直接删掉即可。

3. 优化PHP代码可读性 #

你的PHP渲染部分有很多多余的<?php ?>标签，整理后会更易维护（不影响功能，但利于后续调试）。

修正后的完整代码 #

优化后的PHP渲染代码 #

<?php 
$query = db_get_list("SELECT * FROM stories ORDER BY id DESC"); 
foreach($query as $item) { 
    $id = $item['id'];
    var_dump($item['id']);
?>
<tr>
    <th scope="row"><?php echo $item['id'];?></th>
    <td class="ttruyen" id="tentruyen_<?php echo $id;?>" contenteditable="true">
        <?php echo $item["tentruyen"]; ?>
    </td>
    <td class="tgia" id="tacgia_<?php echo $id;?>" contenteditable="true">
        <?php echo $item["tacgia"]; ?>
    </td>
    <td class="ttat" id="tomtat_<?php echo $id;?>" contenteditable="true">
        <?php echo $item["tomtat"]; ?>
    </td>
    <td class="ndung" id="noidung_<?php echo $id;?>" contenteditable="true">
        <?php echo $item["noidung"]; ?>
    </td>
    <td><button class="label delete label-danger" id='del_<?php echo $id; ?>'>delete</button></td>
    <td><button class="label edit label-info" id="edit_<?php echo $id; ?>">edit</button></td>
</tr>
<?php } ?>

修正后的AJAX编辑函数 #

$(document).on('click', '.edit', function() {
    // 拆分按钮ID获取故事ID
    var split_id = this.id.split("_");
    var edit_id = split_id[1];
    
    // 根据故事ID获取当前行的所有编辑内容，trim()去除多余空格
    var ttruyen = $('#tentruyen_' + edit_id).text().trim();
    var tgia = $('#tacgia_' + edit_id).text().trim();
    var ttat = $('#tomtat_' + edit_id).text().trim();
    var ndung = $('#noidung_' + edit_id).text().trim();

    $.ajax({
        url: "modules/favorites/edit.php",
        type: "POST",
        dataType: "text",
        data: {
            tentruyen: ttruyen,
            tacgia: tgia,
            id: edit_id,
            tomtat: ttat,
            noidung: ndung
        },
        success: function(data) {
            $('#alert_message').html("<div class='col-sm-4 alert alert-success'><b>Edit</b> data successfully</div>");
            // 这里假设fetchdata是刷新列表的函数，确保它能正确接收参数
            fetchdata(data);
        },
        error: function(xhr, status, error) {
            // 新增错误处理，方便调试
            $('#alert_message').html("<div class='col-sm-4 alert alert-danger'>Edit failed: " + error + "</div>");
        }
    });

    // 3秒后清除提示，用setTimeout比setInterval更合适
    setTimeout(function() {
        $("#alert_message").html('');
    }, 3000);
});

补充edit.php的示例代码（你可能需要根据实际情况调整） #

<?php
// 假设你已经完成数据库连接
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 接收POST参数
    $id = $_POST['id'];
    $tentruyen = $_POST['tentruyen'];
    $tacgia = $_POST['tacgia'];
    $tomtat = $_POST['tomtat'];
    $noidung = $_POST['noidung'];

    // 注意：必须使用预处理语句防止SQL注入
    $sql = "UPDATE stories SET tentruyen = ?, tacgia = ?, tomtat = ?, noidung = ? WHERE id = ?";
    $stmt = $pdo->prepare($sql);
    $stmt->execute([$tentruyen, $tacgia, $tomtat, $noidung, $id]);

    // 返回成功标识
    echo "success";
}
?>

调试建议 #

1. 打开浏览器的开发者工具（F12），切换到「网络」标签，点击edit按钮后查看AJAX请求的参数是否正确发送。
2. 查看「控制台」标签，排查是否有JS报错信息。
3. 可以在edit.php中暂时添加var_dump($_POST);，确认后端是否接收到正确的参数。

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