jQuery .ajax() - 向 POST 请求添加查询参数？

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