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

Question

我在 laravel 8 中使用资源控制器，我想通过删除按钮点击它的删除方法。如何使用 methord='delete' 创建按钮。我必须在 JavaScript 中创建它，因为按钮在 table 中，我已经用 JS 创建了 table。

我的编辑按钮是这样的：

<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”字段并将其视为删除请求。

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

Answer 3

<a onclick=&nbsp;sendDelete('"+base_url+"/donner/"+user['donner_id']+"/delete')&nbsp;><button class='btn btn-sm btn-outline-warning'><i class='fa-solid fa-pen-to-square'></i>&nbsp;&nbsp;Delete</button></a>

function sendDelete(p) {
  var xhr = new XMLHttpRequest();
  xhr.open("DELETE",p);
  xhr.send();
}

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

How to send a DELETE request from Button with JavaScrpt?

javascript

php

laravel

laravel-8