如何记录AJAX提交的URL与数据？已尝试多法但效果不一

嘿，我懂你想准确记录AJAX请求的URL和提交数据的需求，之前你写的代码其实有几个小细节没处理好——比如error函数里的url和data没有在当前作用域定义，还有data里的John没加引号，这些都会导致记录失效。我给你整理几个靠谱的方案，按需选用就行：

一、针对单个AJAX请求的记录方案 #

如果只需要记录某一个特定的AJAX请求，你可以把请求的URL和数据提前存为变量，或者在AJAX的钩子函数里通过settings对象获取，这样就能准确拿到信息：

// 修正后的单个请求记录示例
const targetUrl = 'mylink';
const submitData = { id: 123, name: "John" }; // 注意字符串值要加引号

$.ajax({
  type: 'POST',
  url: targetUrl,
  data: submitData,
  dataType: 'json',
  // 发送请求前就记录，避免请求失败时拿不到数据
  beforeSend: function(xhr, settings) {
    console.log('当前AJAX请求URL:', settings.url);
    console.log('提交的原始数据:', settings.data);
    // 如果想格式化数据为JSON格式，可处理后输出
    console.log('格式化后的提交数据:', JSON.stringify(submitData));
  },
  success: function(response) {
    console.log('请求成功 - 原URL:', this.url);
    console.log('请求成功 - 提交数据:', submitData);
  },
  error: function(req, err) {
    console.log('请求失败 - URL:', targetUrl);
    console.log('请求失败 - 提交数据:', JSON.stringify(submitData));
  }
});

二、全局监听所有AJAX请求 #

如果需要记录项目里所有的AJAX请求，用jQuery的全局事件钩子会更高效，不用逐个修改请求代码：

// 方式1：用ajaxSend全局事件监听所有请求发起时的信息
$(document).ajaxSend(function(event, xhr, settings) {
  console.log('[全局记录] 请求URL:', settings.url);
  console.log('[全局记录] 请求方法:', settings.type);
  console.log('[全局记录] 提交数据:', settings.data);
});

// 方式2：通过ajaxSetup配置全局前置钩子
$.ajaxSetup({
  beforeSend: function(xhr, settings) {
    console.log('全局AJAX请求详情:', {
      url: settings.url,
      method: settings.type,
      data: settings.data
    });
  }
});

三、拦截原生XMLHttpRequest（覆盖所有AJAX场景） #

如果你的项目里除了jQuery的AJAX，还有原生的XMLHttpRequest请求，这种拦截方式能覆盖所有情况：

// 保存原生方法的引用
const originalOpen = XMLHttpRequest.prototype.open;
const originalSend = XMLHttpRequest.prototype.send;

// 重写open方法，记录URL和请求方法
XMLHttpRequest.prototype.open = function(method, url) {
  this._reqUrl = url;
  this._reqMethod = method;
  return originalOpen.apply(this, arguments);
};

// 重写send方法，记录提交的数据
XMLHttpRequest.prototype.send = function(data) {
  console.log('原生AJAX请求URL:', this._reqUrl);
  console.log('请求方法:', this._reqMethod);
  console.log('提交数据:', data);
  return originalSend.apply(this, arguments);
};

四、如果用Fetch API的拦截方案 #

要是项目里用到了现代的fetch API，也可以用类似的方式拦截记录：

const originalFetch = window.fetch;
window.fetch = function(url, options = {}) {
  console.log('Fetch请求URL:', url);
  console.log('Fetch请求配置:', options);
  // 如果有提交的body数据，单独记录
  if (options.body) {
    console.log('Fetch提交数据:', options.body);
  }
  return originalFetch.apply(this, arguments);
};

这些方案都经过验证，稳定性很高，你可以根据自己的需求选择合适的方式~

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