在回调函数中访问 jQuery Ajax 请求的 URL答案

【问题标题】：Access the URL of an jQuery Ajax Request in the Callback Function在回调函数中访问 jQuery Ajax 请求的 URL
【发布时间】：2011-07-25 00:13:19
【问题描述】：

当我使用 jQuery 执行 Ajax 请求时，我是否可以看到请求的 URL？

例如，

var some_data_object = { ...all sorts of junk... }
$.get('/someurl.php',some_data_object, function(data, textStatus, jqXHR) {
   var real_url = ? # <-- How do I get this
})

如何访问 jQuery 实际用于发出请求的 URL？也许jqHXR 的某些方法/属性？我在文档中找不到它。

谢谢。

【问题讨论】：

如果一切都失败了，你可以从服务器端代码中返回它，但我猜有一个更优雅的解决方案。
有没有办法在发出实际请求之前找到它？
@sanz 可能值得注意的是，现代浏览器可能会在 XHR 上崩溃。即developer.chrome.com/devtools/docs/…

标签： javascript jquery ajax

【解决方案1】：

在成功方法中设置断点，然后观察

this.url

是请求的真实 url。

【讨论】：

看起来像 @Chris 正在寻找的解决方案，但对于您需要向用户报告或显示 URL 的情况来说，这不是一个好的解决方案。
不是断点，而是 console.log(this.url); 在 success 回调中。
也适用于错误部分。当您需要确定是哪个 url 导致问题时

【解决方案2】：

这是一个可能的解决方案：

通过实现 beforeSend 回调函数在发送到服务器之前捕获 ajax 调用之前。
保存网址和数据

在您生成的错误消息中报告它。

var url = "";

$.ajax({
  url: "/Product/AddInventoryCount",
  data: { productId: productId, trxDate: trxDate, description: description, reference: reference, qtyInCount: qtyInCount }, //encodeURIComponent(productName)
  type: 'POST',
  cache: false,
  beforeSend: function (jqXHR, settings) {
    url = settings.url + "?" + settings.data;
  },
  success: function (r) {
    //Whatever            
  },
  error: function (jqXHR, textStatus, errorThrown) {
    handleError(jqXHR, textStatus, errorThrown, url);
  }
});

function handleError(jqXHR, textStatus, errorThrown, url) {
   //Whatever
}

【讨论】：

在我看来，这是最好的方法，只是稍作改动。您可以简单地使用 console.log 或在 beforeSend 函数中警告 URL，而不是所有带有错误报告的诡计。像魅力一样工作。

【解决方案3】：

使用$.ajaxPrefilter：

// Make sure we can access the original request URL from any jqXHR objects
$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
  jqXHR.originalRequestOptions = originalOptions;
});

$.get(
  'http://www.asdf.asdf'
).fail(function(jqXHR){
  console.log(jqXHR.originalRequestOptions);
  // -> Object {url: "http://www.asdf.asdf", type: "get", dataType: undefined, data: undefined, success: undefined}
});

http://api.jquery.com/jQuery.ajaxPrefilter/

【讨论】：

使用$.ajaxPrefilter 是一个非常好的建议！为这个+1！ :)

【解决方案4】：

似乎 ajaxSend 全局处理程序 (http://api.jquery.com/ajaxSend/) 在其设置参数中提供了 url。您可以在 ajaxSend 回调中存储从 xhr 对象到 url 的映射，然后在成功回调中根据它提供给您的 xhr 对象查找它。

var mappings = {};

$.ajaxSend(function(event, xhr, settings) {
   mappings[xhr] = settings.url;
});

$.ajax({
  url: "http://test.com",
  success: function(data, textStatus, xhr) {
    console.log("url = ", mappings[xhr]);
    delete mappings[xhr];
  }
});

这样做的好处是不必修改每个 $.ajax() 对象。

【讨论】：

【解决方案5】：

仅供参考，作为对 airbai 评论的补充——我无法在他的答案中发表评论——您可以将自己的数据添加到调用中并在回调中检索它。这样您就不必解析 URL。

在这个 JSONP 请求示例中，我添加了变量 user_id（使用 jQuery 3.2 测试）：

var request = $.ajax({
    dataType: "json",
    url: "http://example.com/user/" + id + "/tasks?callback=?",
    user_id: id,
    success: function(data) {
        console.log('Success!');
        console.log("User ID: " + this.user_id);
    },
    timeout: 2000
}).fail(function() {
    console.log('Fail!');
    console.log("User ID: " + this.user_id);
});

【讨论】：

【解决方案6】：

我在文档中也找不到。也许只需通过“代理”包装器将其添加到 jqXHR 对象中，例如...

我尚未对此进行测试，因此您可能需要致电 $.param() 并连接到网址。见http://api.jquery.com/jQuery.param/

var myGet = function(url, data, success) {
    $.get(url, data, function(data, textStatus, jqXHR) {
       jqXHR.origUrl = url; // may need to concat $.param(data) here
       success(data, textStatus, jqXHR);
    });
}

用法：

var some_data_object = { ...all sorts of junk... }
myGet('/someurl.php',some_data_object, function(data, textStatus, jqXHR) {
   var real_url = jqXHR.origUrl;
})

【讨论】：