如何检查指定URL的POST XHR请求是否成功并运行原生JavaScript？

嘿，我来帮你搞定这个问题！不用jQuery，纯原生JS就能实现检测特定URL的POST XHR请求是否成功，然后执行你想要的代码。分两种场景来给你讲解：

如果这个POST请求不是你自己写的代码发起的，而是页面上其他脚本（比如第三方插件）触发的，那我们可以通过重写XMLHttpRequest的方法来全局捕获所有请求，再筛选出目标请求。

步骤1：保存原始的XHR方法 #

首先要保存原生的open和send方法，避免覆盖后破坏原有功能：

// 先把原生的方法存起来
const originalOpen = XMLHttpRequest.prototype.open;
const originalSend = XMLHttpRequest.prototype.send;

步骤2：重写open方法记录请求信息 #

我们需要在请求打开时，记录下请求的方法（POST/GET等）和目标URL，方便后续判断：

XMLHttpRequest.prototype.open = function(method, url) {
  // 把请求方法和URL挂载到当前XHR实例上
  this._requestMethod = method;
  this._requestUrl = url;
  // 调用原生的open方法，保证正常请求流程
  originalOpen.apply(this, arguments);
};

步骤3：重写send方法监听请求结果 #

在请求发送时，添加状态监听，判断是否是我们要的POST请求，并且是否成功：

XMLHttpRequest.prototype.send = function() {
  // 监听请求完成事件（请求成功或失败都会触发）
  this.addEventListener('load', () => {
    // 筛选条件：POST方法、匹配目标URL、状态码表示成功（200-299）
    if (this._requestMethod === 'POST' && 
        this._requestUrl === 'https://your-target-url.com/api' && 
        this.status >= 200 && this.status < 300) {
      // 这里写你要运行的代码！
      console.log('目标POST请求成功啦🥳');
      // 比如执行你的自定义函数
      executeYourCustomLogic();
    }
  });

  // 可选：监听请求失败的情况（比如网络错误）
  this.addEventListener('error', () => {
    if (this._requestMethod === 'POST' && this._requestUrl === 'https://your-target-url.com/api') {
      console.log('目标POST请求失败了😢');
    }
  });

  // 调用原生的send方法，发送请求
  originalSend.apply(this, arguments);
};

// 示例自定义逻辑函数
function executeYourCustomLogic() {
  alert('POST请求成功！现在执行我的自定义代码～');
  // 这里可以写任何你需要的操作：修改DOM、发送另一个请求等等
}

注意事项： #

• 替换'https://your-target-url.com/api'为你实际要监测的URL，要是有查询参数（比如/api/submit?id=123），要完全匹配，或者用includes()做模糊匹配（比如this._requestUrl.includes('/api/submit')），但要注意避免误触发相似的URL。
• 状态码200-299是HTTP标准的成功状态码，如果你需要匹配特定的状态码（比如201），直接写this.status === 201即可。

如果这个请求是你自己写代码发送的，那不用全局监听，直接在请求里添加监听更简单高效：

function sendMyPostRequest() {
  const xhr = new XMLHttpRequest();
  const targetUrl = 'https://your-target-url.com/api';
  // 假设要发送JSON数据，记得设置请求头
  const postData = JSON.stringify({ username: 'test', content: 'hello' });

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

  // 监听请求成功完成
  xhr.addEventListener('load', () => {
    if (xhr.status >= 200 && xhr.status < 300) {
      // 请求成功，执行你的代码
      console.log('自己发起的POST请求成功！');
      executeYourCustomLogic();
    } else {
      console.log('请求返回错误状态码:', xhr.status);
    }
  });

  // 监听网络错误
  xhr.addEventListener('error', () => {
    console.log('请求失败，网络有问题');
  });

  // 发送请求
  xhr.send(postData);
}

// 调用这个函数发起请求
sendMyPostRequest();

这种方式更精准，不会影响页面上的其他XHR请求，适合你能控制请求发起的场景。

内容的提问来源于stack exchange，提问作者Reena Verma