jQuery .ajax() - add query parameters to POST request?

Question

To add query parameters to a url using jQuery AJAX, you do this:

$.ajax({
  url: 'www.some.url',
  method: 'GET',
  data: {
      param1: 'val1'
  }
)}

Which results in a url like www.some.url?param1=val1

How do I do the same when the method is POST? When that is the case, data no longer gets appended as query parameters - it instead makes up the body of the request.

I know that I could manually append the params to the url manually before the ajax request, but I just have this nagging feeling that I'm missing some obvious way to do this that is shorter than the ~5 lines I'll need to execute before the ajax call.

Answer 1

jQuery.param() allows you to serialize the properties of an object as a query string, which you could append to the URL yourself:

$.ajax({
  url: 'http://www.example.com?' + $.param({ paramInQuery: 1 }),
  method: 'POST',
  data: {
    paramInBody: 2
  }
});

Answer 2

Thank you @Ates Goral for the jQuery.ajaxPrefilter() tip. My problem was I could not change the url because it was bound to kendoGrid and the backend web API didn't support kendoGrid's server paging options (i.e. page, pageSize, skip and take). Furthermore, the backend paging options had to be query parameters of a different name. So had to put a property in data to trigger the prefiltering.

var grid = $('#grid').kendoGrid({
    // options here...
    dataSource: {
        transport: {
            read: {
                url: url,
                contentType: 'application/json',
                dataType: 'json',
                type: httpRequestType,
                beforeSend: authentication.beforeSend,
                data: function(data) {
                  // added preFilterMe property
                  if (httpRequestType === 'POST') {
                      return {
                          preFilterMe: true,
                          parameters: parameters,
                          page: data.page,
                          itemsPerPage: data.pageSize,
                      };
                  }

                  return {
                      page: data.page,
                      itemsPerPage: data.pageSize,
                  };
              },
          },
        },
    },
});

As you can see, the transport.read options are the same options for jQuery.ajax(). And in the prefiltering bit:

$.ajaxPrefilter(function(options, originalOptions, xhr) {
    // only mess with POST request as GET requests automatically
    // put the data as query parameters
    if (originalOptions.type === 'POST' && originalOptions.data.preFilterMe) {
        options.url = options.url + '?page=' + originalOptions.data.page 
            + '&itemsPerPage=' + originalOptions.data.itemsPerPage;

        if (originalOptions.data.parameters.length > 0) {
            options.data = JSON.stringify(originalOptions.data.parameters);
        }
    }
});