How to pass additional parameter to jQuery $.ajax() function

Question

I am using following ajax utility function to make requests

function ajaxHandler(url, data)
{
    return new Promise(function (resolve, reject) {
        $.ajax({
            type: 'POST',
            url: url,
            dataType: 'json',
            data: data,
            success: function (data) {
                resolve(data);
            },
            error: function (xhr, textStatus, error) {
                reject(error);
            },


        });
    })

}

The default settings works great most of the time, but there are quite a few cases where I would like pass additional parameters like processData and contentType. How can pass processData and contentType for such cases ?

I do not see `processData` variable in your code. Also `options` is not used. — MaxZoom, Aug 07 '17 at 18:58
MaxZoom , epascarello - I want to use the default for `processData` and `contentType`. However, there are few cases where I have to override default values, for instance while uploading image. Did you get my point ? — Cody, Aug 07 '17 at 19:01
As a side note you dont need to create a Promise, $.ajax already returns a promise object so just return that — Patrick Evans, Aug 07 '17 at 19:05
@Cody yes I understand, hence why I suggested extend. https://api.jquery.com/jquery.extend/ — epascarello, Aug 07 '17 at 19:11

charlietfl · Accepted Answer · 2017-08-07T19:27:11.503

3

Assuming that options is the object you want to pass in; moving the config object out of the function is about the cleanest. Then use $.extend to update the defaults

function ajaxHandler(url, data, options) {

  var config = {
    type: 'POST',
    url: url,
    dataType: 'json',
    data: data
  }

  if (options && $.type(options) == 'object') {
    $.extend(config, options);
  }

  return $.ajax(config)// add a global error handler if desired
}

Usage :

ajaxHandler('path/to/server', {foo:'bar'), {type:'GET'})
  .then(function(data){
     console.log(data);
  }).fail(function(){// or `catch` in jQuery version >=3
     // handle error
  })

Note that $.ajax returns a "thenable" promise so using new Promise is an anti-pattern. See What is the explicit promise construction antipattern and how do I avoid it?

edited Aug 07 '17 at 19:27

answered Aug 07 '17 at 19:09

charlietfl

170,828
13
121
150

Don't we need to catch the error in `ajaxHandler()` function after `.then()` ? – Cody Aug 07 '17 at 19:28
All depends how you want to set it up ...with a global error handler or one per use – charlietfl Aug 07 '17 at 19:29
Also note that `$.post` , `$.get` & `$.getJSON` are also very useful shortcuts that don't require much setup – charlietfl Aug 07 '17 at 19:51

score 1 · Answer 2 · answered Aug 07 '17 at 19:07

I'm not sure if I got it right, if you like to add and override settings of the object you can use $.extend

function ajaxHandler(url, data, extraSettings)
{
    return new Promise(function (resolve, reject) {
        $.ajax($.extend({
            type: 'POST',
            url: url,
            dataType: 'json',
            data: data,
            success: function (data) {
                resolve(data);
            },
            error: function (xhr, textStatus, error) {
                reject(error);
            },


        }, extraSettings));
    })

}

This way $.extend(obj1, obj2) returns obj1 adding or overwriting properties of obj2.

you can use it like: ajaxHanler("url", "data", { contentType: "text/plain" });

How to pass additional parameter to jQuery $.ajax() function

2 Answers2