如何在jQuery的success回调函数中获取请求的最新URL

你之前使用this.url失效的核心原因是this指向ajax配置对象，如果你复用同一个配置对象发送多个请求、或者后续修改了配置对象的url属性，回调触发时读取的就是修改后的最新值，而非本次请求的实际URL。

直接获取方案 #

jQuery 3.0及以上版本可以直接在success回调内通过第三个入参jqXHR对象获取本次请求的最终URL，对应属性为jqXHR.url，该属性记录的是请求发送时的实际完整地址，不受后续页面URL变动、其他请求修改配置的影响，示例如下：

$.ajax({
  url: '/your/request/path',
  success: function(data, statusText, jqXHR) {
    // 直接获取本次请求的URL
    const currentRequestUrl = jqXHR.url;
    console.log(currentRequestUrl);
  }
})

低版本jQuery兼容方案 #

如果使用的jQuery版本低于3.0，无法通过jqXHR.url直接获取，可以用以下两种稳定方案：

• 闭包捕获请求URL
  发送请求前将本次请求的URL存入局部变量，利用闭包特性保留变量快照，不受后续变量修改影响：

  // 定义本次请求的URL，后续即便修改该变量也不会影响回调内的取值
  const targetUrl = '/your/request/path?param=test';
  $.ajax({
    url: targetUrl,
    success: function(data, statusText, jqXHR) {
      console.log(targetUrl);
    }
  })
  

• 显式挂载URL到请求配置对象
  把本次请求的URL作为自定义属性挂载到ajax配置对象上，回调内通过this访问自定义属性，避免复用配置对象时this.url被修改的问题：

  $.ajax({
    url: '/your/request/path',
    // 自定义属性存储当前请求URL
    requestUrl: '/your/request/path',
    success: function(data, statusText, jqXHR) {
      console.log(this.requestUrl);
    }
  })
  

如果success回调是单独定义的外部函数，可以通过bind方法绑定URL参数：

function requestSuccessHandler(data, statusText, jqXHR) {
  console.log(this.bindUrl);
}

const currentUrl = '/your/request/path';
$.ajax({
  url: currentUrl,
  success: requestSuccessHandler.bind({bindUrl: currentUrl})
})

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