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?

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?

• javascript
• jquery
• ajax

Share Improve this question Follow asked Nov 30, 2014 at 19:09 Adriano RosaAdriano Rosa 8,77111 gold badge2828 silver badges2525 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

This question is old, but it can help those in need from now on with low plexity. 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;
});

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

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