删除记录后动态刷新Bootstrap模态框的技术问询

你已经搞定了文档删除的核心功能，只差最后一步——删除后自动刷新模态框里的列表。我来一步步帮你实现这个效果：

1. 先封装列表加载逻辑（方便复用） #

首先把原来加载文档列表的AJAX代码抽成独立函数，这样删除成功后直接调用它就能刷新列表了：

// 封装加载文档列表的函数
function caricaDocumenti(uid) {
    $('#content-dynamic').html('');
    $('#loader-modal').show();
    // 把当前用户ID存在模态框的data属性里，删除时要用到
    $('#modalDocumenti').data('uid', uid);
    
    $.ajax({
        url: 'temp/amministratore/getdocumenti.php',
        type: 'POST',
        data: 'id=' + uid,
        dataType: 'html'
    })
    .done(function(data) {
        $('#content-dynamic').html(data);
        $('#loader-modal').hide();
    })
    .fail(function() {
        $('#content-dynamic').html('<i class="glyphicon glyphicon-info-sign"></i> Qualcosa è andato storto, prova ancora...');
        $('#loader-modal').hide();
    });
}

$(document).ready(function() {
    // 原来打开模态框的逻辑，改成调用封装的函数
    $(document).on('click', '#getDocumenti', function(e) {
        e.preventDefault();
        var uid = $(this).data('id');
        caricaDocumenti(uid);
        $('#modalDocumenti').modal('show');
    });
});

2. 给动态生成的删除按钮绑定事件委托 #

因为删除图标是AJAX加载出来的动态内容，直接绑定点击事件会失效，得用事件委托：

另外注意：不要给多个删除按钮用同一个id="deleteFile"，ID在页面里必须唯一！改成用class="deleteFile"：

修改动态内容里的删除按钮代码：

<a onclick="return confirm('Sei sicuro di volere eliminare questo elemento?');" class="deleteFile" data-id="<?php echo $riga_doc["id"]; ?>" title="Cancella"><i class="fas fa-trash-alt"></i></a>

然后在JS里添加删除事件的逻辑：

$(document).ready(function() {
    // ... 原来的打开模态框逻辑 ...

    // 删除按钮的事件委托
    $(document).on('click', '.deleteFile', function(e) {
        e.preventDefault();
        if (confirm('Sei sicuro di volere eliminare questo elemento?')) {
            var fileId = $(this).data('id');
            // 从模态框的data属性里取出之前存的用户ID
            var uid = $('#modalDocumenti').data('uid');

            // 发送删除请求
            $.ajax({
                url: 'temp/amministratore/eliminaDocumento.php', // 你需要新建这个删除接口
                type: 'POST',
                data: 'id=' + fileId,
                dataType: 'json'
            })
            .done(function(risposta) {
                if (risposta.successo) {
                    // 删除成功，立刻刷新列表
                    caricaDocumenti(uid);
                } else {
                    alert('Errore durante l\'eliminazione: ' + risposta.messaggio);
                }
            })
            .fail(function() {
                alert('Qualcosa è andato storto durante l\'eliminazione, prova ancora...');
            });
        }
    });
});

3. 编写删除文档的PHP接口（eliminaDocumento.php） #

新建这个文件，负责删除数据库记录和服务器上的物理文件（可选）：

<?php
require_once '../../core/function.php';

if (isset($_REQUEST['id'])) {
    $fileId = intval($_REQUEST['id']);
    
    // 先获取文件路径，删除服务器上的文件（如果需要的话）
    $query = "SELECT file FROM upload_contratti WHERE id = $fileId";
    $risultato = $conn->query($query);
    if ($risultato->num_rows > 0) {
        $riga = $risultato->fetch_assoc();
        $percorsoFile = '../../uploads/' . $riga['file'];
        if (file_exists($percorsoFile)) {
            unlink($percorsoFile);
        }
    }
    
    // 删除数据库中的记录
    $queryElimina = "DELETE FROM upload_contratti WHERE id = $fileId";
    if ($conn->query($queryElimina) === TRUE) {
        echo json_encode(['successo' => true, 'messaggio' => 'Documento eliminato con successo']);
    } else {
        echo json_encode(['successo' => false, 'messaggio' => $conn->error]);
    }
} else {
    echo json_encode(['successo' => false, 'messaggio' => 'ID documento non specificato']);
}
?>

最后效果 #

现在用户点击删除图标并确认后，会自动发送删除请求，成功后立刻重新加载文档列表，模态框不用关闭再打开就能看到更新后的内容了。

内容的提问来源于stack exchange，提问作者M.Max