使用 PHP、JS/jQuery 和一点 AJAX 的 CRUD 方法

Question

我一直在开发一个系统，您可以在其中创建-读取-更新-删除到/从 SQLite 数据库中的表。到目前为止，我只编写了 create 和 view 方法（简单）。

现在，我在决定如何删除和更新项目时遇到了障碍。在视图页面，有通过php查询数据库和生成表（通过php回显成html）。每行旁边还添加了一个按钮，看起来像一个小垃圾桶，用于删除该行。

如何使用 AJAX 同时从 html 表和 sqlite 表中删除行？一个更明确的问题是，如何将每个按钮链接到每一行并在单击按钮时查询数据库？

这是生成的表格：

foreach($result as $entry){
 echo  '<tr>' . '<td>'. $entry['department']. ' ' . $entry['CRN']. '</td>' . 
    '<td>'. $entry['title'] . '</td>' . 
    '<td>'. $entry['addDate'] . '</td>'. 
    '<td><button class="fg-button fg-button-icon-left ui-state-default ui-corner-all"><span class="ui-icon ui-icon-trash"></span></button></td>'.'</tr>';
}

Answer 1

1. 创建一个 PHP 控制器和操作。它必须将 ID 作为参数，并且应该使用该 ID 对您的数据库执行删除命令。理想情况下，它将只接受 DELETE 请求（不接受 GET 或 POST）。这并不总是可行的，因为某些浏览器不支持 DELETE HTTP 请求。
2. 在您的前端，创建如下所示的 HTML 和 javascript：

HTML：

<input id="clickMe" type="button" value="Delete Button" data-rowId="12"/>

Javascript：

$(document).ready(function(){
    $('#clickMe').click(function(){
        // send the delete request
        $.ajax({
            url: '/myEntity/delete',
            data: {id: $(this).data('rowId')},
            type: 'DELETE',
            // removes the row only if the delete succeeds
            success: function(){ $(this).parents('tr').remove(); }
        });
    });
});

如果您正在使用不支持 DELETE 的浏览器，请将类型：“DELETE”更改为：“POST”。

Answer 2

您可以让 Ajax 调用返回新的值列表，然后将整个表替换为新内容。

• 在 JS 中，使用回调进行删除调用。

• 在回调中：

  • 清空包含 表
  • 根据 调用结果（通过调用 PHP，如果这是生成表的原因）
  • 附加该表 到div

这是我们经常做的事情，但我们需要这样做，因为它是一个多用户系统。