Get settings used by jquery $.ajax request

Question

I'm using $.ajax for many requests each one has a different settings and values passed to the function.

I need to check whether these settings are merged correctly into $.ajax settings.

var options = {
  endpoint: '/path/page'
  method : "POST",
  mode: 'abort',
  data : { value : $(this).val() },
  headers : { 'X-Key' : 'value' }
}

$.ajax( $.extend(true, {
    url: endpoint,
    type: 'GET',
    cache: true,
    dataType: 'json',
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
    headers : {
        'X-Same-Domain':'1',
    },
    async: true,
    data: data,
    timeout: 5000,
}, options) )

How can I see in console those settings used by $.ajax request on success or failure?

score 5 · Answer 1 · answered May 17 '19 at 15:21

This question is old, but it can help those in need from now on with low complexity. It is possible to decorate the jqxhr with settings in the .ajaxSend, with this it will be passed on to all the flow where the jqxhr is after sending.

$(document).ajaxSend(function (event, jqxhr, settings) {
  jqxhr.settings = settings;
});

huysentruitw · Accepted Answer · 2014-12-01T07:38:03.423

1

jQuery doesn't seem to support this but you can implement this yourself:

function ajax(options) {
    var defer = $.Deferred();
    $.ajax(options)
        .done(function(data, textStatus, jqXHR) {
            defer.resolve(data, textStatus, jqXHR, options);
        })
        .fail(function(jqXHR, textStatus, errorThrown) {
            defer.reject(jqXHR, textStatus, errorThrown, options);
        });
    return defer.promise();
}

Usage

var options = {
    endpoint: '/path/page'
    method : "POST",
    mode: 'abort',
    data : { value : $(this).val() },
    headers : { 'X-Key' : 'value' }
};

ajax($.extend(true, {
    url: endpoint,
    type: 'GET',
    cache: true,
    dataType: 'json',
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
    headers : {
        'X-Same-Domain':'1',
    },
    async: true,
    data: data,
    timeout: 5000,
}, options)).done(function(data, textStatus, jqXHR, ajaxOptions) {
    console.log("done", ajaxOptions);
}).fail(function(jqXHR, textStatus, errorThrown, ajaxOptions) {
    console.log("fail", ajaxOptions);
});

edited Dec 01 '14 at 07:38

answered Nov 30 '14 at 19:32

huysentruitw

27,376
9
90
133

I think the OP wants to know the settings actually passed to `$.ajax()`, therefore the object returned by `$.extend()` needs to be assigned. `options` is only part of the picture. – Roamer-1888 Nov 30 '14 at 19:47
In the `done` & `fail` callbacks, you'll get the extended options (it's an extra callback function argument). Renamed those variables to make it more clear – huysentruitw Nov 30 '14 at 19:48
If so, then it's an undocumented feature. – Roamer-1888 Nov 30 '14 at 19:50
Maybe you are thinking of angular's `$http()`, where the config object is indeed passed back to the two callbacks as a fourth argument. – Roamer-1888 Nov 30 '14 at 20:01
1

I thought there were some method to passed by jqXHR that I'd able to get these options after a request has been sent, @WouterHuysentruit this worked like a charm! Thanks all of you guys. – Adriano Rosa Nov 30 '14 at 21:26
Eeek, now we've got the [deferred anti-pattern](http://stackoverflow.com/questions/23803743/)! – Roamer-1888 Nov 30 '14 at 21:41
@Roamer-1888 it is not the anti-pattern you see here, I'm adding the additional options to the second promise, which is the clue of this solution. This also means 4 of your comments are based on the fact that you didn't read the answer. – huysentruitw Dec 01 '14 at 07:39
@WouterHuysentruit, it's not so much a clue to the solution as the heart of it. The point is that it's unnecessary. – Roamer-1888 Dec 01 '14 at 13:32
And if my comments are so rubbish, why do you keep amending your answer in light of them? – Roamer-1888 Dec 01 '14 at 13:57

Roamer-1888 · Answer 3 · 2014-11-30T19:48:14.713

1

Typically, you will do something like this :

var defaults = {...};

...

var options = {...};

var ajaxSettings = $.extend(true, {}, defaults, options);
console.log(ajaxSettings);

$.ajax(ajaxSettings).then(function(result) {
    // success handler
    // `ajaxSettings` is still in scope here
}, function(error) {
    // error handler
    // `ajaxSettings` is still in scope here
});

edited Nov 30 '14 at 19:48

answered Nov 30 '14 at 19:36

Roamer-1888

19,138
5
33
44

I see your point, this approach indeed the simplest also worked for me. Thanks for the answer. – Adriano Rosa Nov 30 '14 at 21:26
1

Make clear that ajaxSettings may not be reused in the same scope as long as there's a pending request. Maybe you could modify you answer and use a closure to encapsulate the variable. – huysentruitw Dec 01 '14 at 16:42

Get settings used by jquery $.ajax request

3 Answers3