如何使用 JavaScrpt 从 Button 发送 DELETE 请求？

Question

我正在 laravel 8 中使用资源控制器，我想通过删除按钮点击它的删除方法。如何使用 method='delete' 创建一个按钮。我必须在 JavaScript 中创建它，因为按钮位于表中，并且我已经使用 JS 创建了该表。

我的编辑按钮是这样的：

<a href='"+base_url+"/donner/"+user['donner_id']+"/edit'><button class='btn btn-sm btn-outline-warning'><i class='fa-solid fa-pen-to-square'></i>&nbsp;&nbsp;Edit</button></a>

对于删除按钮，我必须使用删除方法发送请求。表单按钮或锚标记。

Answer 1

看看下面的示例代码。它向您展示了步骤是什么。给按钮绑定一个js触发器。然后使用 fetch 或 axios 或whatEverToMakeJSApiCalls。

注意我确信下一个问题将会出现。CSRF, etc

<button 
  class=""
  onclick="deleteSomething( {{$id}} )">
</button>

function deleteSomething(id) {
  fetch('/api/deleteModelName/' + id,  {
    method: 'DELETE'
  })
}

Answer 2

无法直接从纯 HTML 发送 DELETE 请求。您可以使用 JavaScript 发送 DELETE 请求，或者某些框架支持将该方法作为 POST 请求正文中的参数传递。

<form action="/delete" method="POST">
    <input type="hidden" name="_method" value="DELETE" />
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <input type="submit" value="Delete">
</form>

该技术使用的表单的唯一可见输入是按钮。单击该按钮时，它会提交表单，并向服务器发送 POST 请求。然后，服务器检测“_method”字段并将其视为 DELETE 请求。

您可以在Laravel 文档中了解有关方法欺骗的更多信息。