浅谈Ajax请求的GET,POST,PUT,DELETE,PATCH,OPTIONS

2023-06-01 19:19:31

精通 AJAX 请求：掌握六种请求方式

作为一名开发人员，掌握 AJAX（异步 JavaScript 和 XML）请求至关重要。它使您能够在不重新加载页面的情况下，从服务器动态获取和更新数据。了解不同的 AJAX 请求方式对于在适当的场景中使用它们至关重要。让我们深入了解六种主要请求方式：

GET 请求：获取数据

GET 请求是获取服务器数据的首选方法。请求的数据附加在 URL 上，作为查询字符串。此方法适用于检索静态或只读数据，因为不会修改服务器上的任何信息。

示例：

fetch('https://example.com/users')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

POST 请求：创建或更新数据

POST 请求用于向服务器发送数据，以创建或更新资源。请求正文包含需要提交的数据。此方法适用于创建新记录、更新现有记录或提交表单数据。

示例：

const data = { name: 'John', email: 'john@example.com' };

fetch('https://example.com/users', {
  method: 'POST',
  body: JSON.stringify(data),
  headers: { 'Content-Type': 'application/json' }
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

PUT 请求：更新数据

PUT 请求专门用于更新服务器上的现有资源。它取代资源的现有状态，将请求正文中的数据作为新状态。请求 URL 必须指定要更新的资源的 ID。

示例：

const data = { name: 'John', email: 'john.doe@example.com' };

fetch('https://example.com/users/123', {
  method: 'PUT',
  body: JSON.stringify(data),
  headers: { 'Content-Type': 'application/json' }
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

DELETE 请求：删除数据

DELETE 请求用于从服务器删除指定资源。请求 URL 必须指定要删除的资源的 ID。此方法永久删除资源，因此在使用时需要谨慎。

示例：

fetch('https://example.com/users/123', {
  method: 'DELETE'
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

PATCH 请求：部分更新

PATCH 请求允许您仅更新服务器上资源的特定字段。它使用请求正文，其中包含需要更新的字段及其新值。此方法对于避免覆盖不需要更改的字段很有用。

示例：

const data = { name: 'John' };

fetch('https://example.com/users/123', {
  method: 'PATCH',
  body: JSON.stringify(data),
  headers: { 'Content-Type': 'application/json' }
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

OPTIONS 请求：获取支持的请求方法

OPTIONS 请求用于获取服务器支持的 HTTP 请求方法。此信息对于确保客户端发送兼容的请求非常有用。

示例：

fetch('https://example.com/users', {
  method: 'OPTIONS'
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));