如何使用 JavaScript 在 Rails API 中执行删除操作：逐步指南

2024-03-17 22:42:11

如何使用 Rails API 在 JavaScript 中实现删除操作

介绍

Rails API 和 JavaScript 的强大结合使我们能够构建动态且响应迅速的应用程序。了解如何使用 JavaScript 通过 fetch delete 请求与 Rails API 交互至关重要，因为它使我们能够执行诸如删除记录之类的操作。本文将逐步指导您完成此过程，并分享一些最佳实践和提示，以帮助您入门。

步骤 1：定义控制器方法

在您的 Rails 控制器中，创建一个处理 DELETE 请求的销毁方法。该方法应该找到并销毁要删除的记录。以下是该方法的一个示例：

def destroy
  track = Track.find_by(id: params[:id])
  track.destroy
end

步骤 2：创建前端代码

在 JavaScript 中，您需要为要删除元素添加事件侦听器。这可以通过使用 addEventListener 方法来实现。以下代码创建一个在单击 div 时触发 removeTrack 函数的侦听器：

document.querySelector('div').addEventListener('click', removeTrack);

步骤 3：实现删除函数

接下来，您需要定义 removeTrack 函数来处理单击事件。此函数应执行以下步骤：

获取要删除记录的 ID。
向 Rails API 发送 DELETE 请求。
处理响应并从前端中删除元素。

以下是 removeTrack 函数的示例实现：

function removeTrack(event) {
  event.preventDefault();
  let id = event.target.dataset.id;
  fetch(BASE_URL + `/tracks/${id}`, {
    method: 'DELETE',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    }
  })
  .then(() => {
    event.target.parentElement.remove();
  });
}