JS发送post请求|极客笔记

JS发送post请求

在Web开发中，发送POST请求是非常常见的操作，特别是在与服务器端进行数据交互时。在JavaScript中，我们可以通过使用XMLHttpRequest对象或fetch API来发送POST请求。本文将详细介绍如何使用这两种方式进行POST请求的发送。

使用XMLHttpRequest发送POST请求

XMLHttpRequest是一个用于在客户端和服务器之间传输数据的JavaScript对象。通过XMLHttpRequest对象，我们可以发送各种类型的HTTP请求，包括GET，POST等。

下面是一个使用XMLHttpRequest对象发送POST请求的示例代码：

const xhr = new XMLHttpRequest();
const url = 'https://api.example.com/postData';

xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/json');

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const response = JSON.parse(xhr.responseText);
    console.log(response);
  }
};

const data = {
  username: 'john_doe',
  password: 'password123'
};

xhr.send(JSON.stringify(data));

上面的代码首先创建一个XMLHttpRequest对象，然后定义了请求的URL和请求方法为POST。接下来设置了请求头的Content-Type为application/json，表示请求的数据格式为JSON。

在onreadystatechange事件中，我们监听了请求的状态变化，当请求成功完成且返回状态码为200时，我们解析了返回的数据并输出到控制台。

最后，我们给请求发送了一段JSON格式的数据。

使用fetch API发送POST请求

fetch API是一种比XMLHttpRequest更现代化的方式来进行网络请求。它提供了更简洁易用的API，支持Promise对象，能够更好地处理异步请求。

下面是一个使用fetch API发送POST请求的示例代码：

const url = 'https://api.example.com/postData';
const data = {
  username: 'john_doe',
  password: 'password123'
};

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

上面的代码中，我们首先定义了请求的URL和数据。然后使用fetch方法发送POST请求，传入请求的URL和一个配置对象，其中定义了请求方法为POST，请求头的Content-Type为application/json，以及请求的数据内容。

接着通过Promise对象对返回的响应进行解析并输出数据，最后在catch中捕获错误并输出错误信息。