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

下面是关于不使用jQuery对Web API接口POST、PUT、DELETE数据的完整攻略，包括使用原生JavaScript实现的方法和两个示例说明。

使用原生JavaScript实现

使用原生JavaScript可以通过XMLHttpRequest对象来实现对Web API接口的POST、PUT、DELETE请求。具体步骤如下：

1. 创建XMLHttpRequest对象；
2. 设置请求方法、请求地址和请求头；
3. 监听请求状态变化事件；
4. 发送请求，并传递请求数据；
5. 处理响应数据。

下面是一个使用原生JavaScript实现POST请求的示例代码：

const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/users');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 201) {
    const response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};
const data = { name: 'John', age: 30 };
xhr.send(JSON.stringify(data));

上述代码中，使用XMLHttpRequest对象实现了对Web API接口的POST请求，设置了请求方法、请求地址和请求头，并传递了请求数据。在请求状态变化事件中，处理了响应数据。

类似地，可以使用XMLHttpRequest对象实现PUT和DELETE请求，只需要修改请求方法和请求地址即可。

示例说明

下面是两个示例，分别演示了使用原生JavaScript实现POST和DELETE请求的过程。

示例1：使用原生JavaScript实现POST请求

假设有一个Web API接口，用于创建用户，请求地址为/api/users，请求数据为JSON格式的用户信息。可以使用以下代码实现POST请求：

const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/users');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 201) {
    const response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};
const data = { name: 'John', age: 30 };
xhr.send(JSON.stringify(data));

上述代码中，使用XMLHttpRequest对象实现了对Web API接口的POST请求，设置了请求方法、请求地址和请求头，并传递了请求数据。在请求状态变化事件中，处理了响应数据。

示例2：使用原生JavaScript实现DELETE请求

假设有一个Web API接口，用于删除用户，请求地址为/api/users/:id，其中:id为用户ID。可以使用以下代码实现DELETE请求：

const xhr = new XMLHttpRequest();
xhr.open('DELETE', `/api/users/${userId}`);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 204) {
    console.log('User deleted successfully');
  }
};
xhr.send();

上述代码中，使用XMLHttpRequest对象实现了对Web API接口的DELETE请求，设置了请求方法和请求地址。在请求状态变化事件中，处理了响应数据。

结论

本文为您提供了关于不使用jQuery对Web API接口POST、PUT、DELETE数据的完整攻略，包括使用原生JavaScript实现的方法和两个示例说明。在实际应用中，可以根据具体需求选择不同的请求方法和请求地址，从而实现对Web API接口的数据操作。