不使用jQuery对Web API接口POST, PUT, DELETE数据

jQuery是一个流行的JavaScript库，被用于开发Web应用程序。然而，jQuery并非必需品，JavaScript本身就提供了许多功能，可以访问Web API，从而可以在不使用jQuery的情况下进行POST, PUT和DELETE的请求。在这篇文章中，我们将介绍如何使用原生JavaScript发送这些请求。

XMLHttpRequest对象

XMLHttpRequest（XHR）对象是JavaScript中一个核心对象，它允许我们在不刷新页面的情况下将数据从服务器获取到并更新页面。XHR对象可用于发送POST, PUT和DELETE请求。

发送POST请求

要使用XHR对象发送POST请求，可以使用以下代码：

const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/endpoint');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify(data));

这个代码块将创建一个XHR对象，并使用open()方法打开POST请求。在这里，我们设置了URL为/api/endpoint，并向请求头中添加了一个Content-Type标头，表示我们将发送JSON数据，而非表单数据。然后，我们使用send()方法将JSON数据发送到服务器。

发送PUT请求

发送PUT请求的代码与发送POST请求很相似，只需将open()方法的第一个参数从'POST'改为'PUT'即可：

const xhr = new XMLHttpRequest();
xhr.open('PUT', '/api/endpoint');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify(data));

在这个例子中，XHR对象打开了一个PUT请求，并使用请求头告知服务器将发送JSON格式的数据。

发送DELETE请求

发送DELETE请求的方式与前面两个请求也很相似：

const xhr = new XMLHttpRequest();
xhr.open('DELETE', '/api/endpoint');
xhr.send();

在这个例子中，我们仅仅向服务器发送了一个DELETE请求，没有发送附加数据。

使用fetch

Fetch是一种新的API，用于网络请求。它提供了更简洁的语法，用于发送POST, PUT和DELETE请求。与XHR对象不同，Fetch将数据发送到网络后返回一个Promise对象，使代码更易于阅读和理解。

发送POST请求

使用Fetch发送POST请求，可以使用以下代码：

fetch('/api/endpoint', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
}).then(response => {
  // handle response
});

在这里，我们向Fetch传递了要访问的URL，以及一个包含要发送请求的方法、请求头和请求体的配置对象。在配置对象中，我们设置了请求方法为'POST'，设置了Content-Type 标头，并使用JSON.stringify()将数据序列化为JSON格式字符串，然后将其作为请求体发送。

发送PUT请求

发送PUT请求与发送POST请求非常相似，但是我们需要更改方法参数，并将其设为'PUT'：

fetch('/api/endpoint', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
}).then(response => {
  // handle response
});

这个代码块将通过Fetch发送一个PUT请求，并向服务器传递JSON格式的数据。

发送DELETE请求

发送DELETE请求的方式与前面的两个请求也非常相似：

fetch('/api/endpoint', {
  method: 'DELETE'
}).then(response => {
  // handle response
});

在这个例子中，我们向Fetch传递了要访问的URL，并设置了请求方法为'DELETE'，这就是向服务器发送DELETE请求的全部代码。

结论

在此，我们介绍了如何在不使用jQuery的情况下使用原生JavaScript进行POST, PUT和DELETE请求。我们可以使用XHR对象或Fetch API来执行这些操作，其语法和流程与使用jQuery很相似，但是无需加载额外的库文件。尝试使用这些API，可能会对你的代码性能和可维护性产生积极影响。