web前端 怎么发delete

要发送 DELETE 请求，可以使用 JavaScript 的 XMLHttpRequest 对象或者 Fetch API。

1. 使用 XMLHttpRequest 对象发送 DELETE 请求：

var xhr = new XMLHttpRequest();
xhr.open("DELETE", "your_url_here", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log("DELETE 请求成功！");
  }
};
xhr.send();

2. 使用 Fetch API 发送 DELETE 请求：

fetch("your_url_here", {
  method: "DELETE"
})
.then(function(response) {
  if (response.ok) {
    console.log("DELETE 请求成功！");
  }
})
.catch(function(error) {
  console.error("DELETE 请求发生错误：", error);
});

在上述代码中，将 "your_url_here" 替换为要发送 DELETE 请求的目标 URL。如果请求成功，会打印出 "DELETE 请求成功！" 的消息；如果发生任何错误，则会打印出相应的错误消息。

不过需要注意的是，DELETE 请求可能在某些情况下受到跨域限制。如果你要发送的 DELETE 请求是跨域的，你需要在服务器端进行相应的配置，允许跨域请求。否则，浏览器会抛出 CORS（跨源资源共享）错误。

另外，发送 DELETE 请求时，你也可以附加一些请求参数或者请求头信息。具体的参数和头信息根据你的实际需求而定。

要发出DELETE请求，您可以使用以下几种方法之一：

1. 使用HTML表单：可以通过创建一个带有方法属性设置为"delete"的HTML表单来发送DELETE请求。在表单中添加一个隐藏的输入字段，用于指定要删除的资源的ID或标识符。然后使用JavaScript监听表单的提交事件，以便在用户单击提交按钮时发送DELETE请求。

<form id="deleteForm" method="delete" action="/api/resource">
  <input type="hidden" name="id" value="123">
  <input type="submit" value="Delete">
</form>

<script>
document.getElementById("deleteForm").addEventListener("submit", function(event) {
  event.preventDefault(); // 阻止表单默认提交行为
  var form = event.target;
  
  var xhr = new XMLHttpRequest();
  xhr.open(form.method, form.action);
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
      if (xhr.status === 200) {
        alert("删除成功！");
      } else {
        alert("删除失败！");
      }
    }
  };
  xhr.send(JSON.stringify({ id: form.elements.id.value }));
});
</script>

2. 使用XMLHttpRequest：可以使用JavaScript通过XMLHttpRequest对象发送DELETE请求。您可以通过设置请求方法为"DELETE"、设置请求头内容类型为"application/json"以及发送要删除的资源的ID或标识符作为请求体来发送请求。

var xhr = new XMLHttpRequest();
xhr.open("DELETE", "/api/resource");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      alert("删除成功！");
    } else {
      alert("删除失败！");
    }
  }
};
xhr.send(JSON.stringify({ id: 123 }));

3. 使用fetch API：fetch API是一种替代XMLHttpRequest的现代网络请求方法。您可以使用fetch发送DELETE请求，类似于XMLHttpRequest的方法。设置请求方法为"DELETE"、设置请求头内容类型为"application/json"并发送要删除的资源的ID或标识符作为请求体。

fetch("/api/resource", {
  method: "DELETE",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({ id: 123 })
})
.then(function(response) {
  if (response.ok) {
    alert("删除成功！");
  } else {
    alert("删除失败！");
  }
})
.catch(function(error) {
  console.error(error);
});

4. 使用Axios：Axios是一个流行的HTTP客户端，可以在浏览器和Node.js中使用。它提供了简化的API，可以轻松地发送DELETE请求。

axios.delete("/api/resource", {
  data: { id: 123 }
})
.then(function(response) {
  alert("删除成功！");
})
.catch(function(error) {
  console.error(error);
});

5. 服务器端框架：如果您使用的是服务器端框架，例如Express.js，可以使用相应的路由来处理DELETE请求。根据框架和路由的不同，您可以发送DELETE请求并发送要删除的资源的ID或标识符作为请求参数来触发相应的处理程序。

以上是一些发出DELETE请求的方法，您可以根据您的具体需求选择其中一种适合您的方法来实现。

要向服务器发送DELETE请求来删除数据，在前端发起DELETE请求需要通过以下几个步骤来实现：

1. 创建XMLHttpRequest对象或使用fetch API ：

使用XMLHttpRequest:

var xhr = new XMLHttpRequest();

使用fetch API:

fetch(url, {
    method: 'DELETE'
})

2. 设置请求的URL：

使用XMLHttpRequest:

xhr.open("DELETE", url, true);

使用fetch API:

fetch(url, {
    method: 'DELETE'
})

3. 设置请求头（可选）：

使用XMLHttpRequest:

xhr.setRequestHeader("Content-Type", "application/json");

使用fetch API:

fetch(url, {
    method: 'DELETE',
    headers: {
        "Content-Type": "application/json"
    }
})

4. 发送请求：

使用XMLHttpRequest:

xhr.send();

使用fetch API:

fetch(url, {
    method: 'DELETE',
    headers: {
        "Content-Type": "application/json"
    }
})

5. 处理响应：

使用XMLHttpRequest:

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 请求成功
        console.log(xhr.responseText);
    }
};

使用fetch API:

fetch(url, {
    method: 'DELETE',
    headers: {
        "Content-Type": "application/json"
    }
}).then(response => {
    if (response.ok) {
        // 请求成功
        return response.text();
    } else {
        throw new Error('请求失败');
    }
}).then(data => {
    console.log(data);
}).catch(error => {
    console.error(error);
});

以上是使用XMLHttpRequest和fetch API发起DELETE请求的基本流程。需要注意的是，在使用fetch API时，fetch函数返回的是一个Promise对象，我们可以使用.then()方法处理响应，也可以使用.catch()方法处理错误。另外，需要根据后端接口的要求设置请求头和请求体的内容类型。