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

Is there a way that I can see the URL that was requested when I do an Ajax request with jQuery?

是否有一种方法可以让我看到在使用jQuery进行Ajax请求时所请求的URL ?

e.g.,

例如,

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
})

How can I access the URL that jQuery actually used to make the request? Perhaps some method/property of jqHXR? I couldn't find it in the documentation.

如何访问jQuery实际用于发出请求的URL ?jqHXR的一些方法/属性?我在文件中找不到。

Thanks.

谢谢。

6 个解决方案

#1

Set a break point in success method, then watch

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

this.url

is the real url for the request.

是请求的真实url。

#2

Here is a possible solution:

这里有一个可能的解决方案:

Catch the ajax call before it is sent to the server by implementing the beforeSend callback function.
通过实现上述回调函数，在将ajax调用发送到服务器之前捕获它。
Save the url and the data
保存url和数据

Report it in the error message you generate.

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

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
}

#3

Using $.ajaxPrefilter:

使用.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/

#4

It seems like the ajaxSend global handler (http://api.jquery.com/ajaxSend/) provides the url in its settings parameter. You could store a mapping from the xhr object to the url in your ajaxSend callback, then in your success callback look it up given the xhr object that it provides you with.

看起来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];
  }
});

This has the advantage of not having to modify each $.ajax() object.

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

#5

I couldn't find it in the docs either. Maybe just add it to the jqXHR object through a "proxy" wrapper like...

我在医生那里也找不到。也许只需通过类似于…的“代理”包装器将其添加到jqXHR对象中。

I haven't tested this, so you may need to call $.param() and concat to the url. See http://api.jquery.com/jQuery.param/

我还没有对此进行测试，因此您可能需要调用$.param()并concat到url。参见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);
    });
}

usage:

用法:

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

#6

FYI, as an addition to airbai's comment -I cannot comment inside his answer,- you can add your own data to the call and retrieve it inside the callbacks. This way you don't have to parse the URL.

顺便说一句，作为airbai注释的补充——我不能在他的答案中进行注释——您可以将自己的数据添加到调用中，并在回调中检索它。这样，您不必解析URL。

In this example JSONP request I have added the variable user_id (tested with jQuery 3.2):

在这个示例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);
});

#1