It sounds like you're making a GET request, whether via your own jQuery call or via Datatables. In a GET request, parameters are sent to the server via the url query string:
example.com?key1=value1&key2=value2
Part of the abstraction that the jQuery does behind the scenes in $.ajax() is to convert the data that you pass in via the data parameter in the object to a suitable format for the request. In the case of a standard GET request with content type application/x-www-form-urlencoded, it's a string of key/value paris separated by ampersands. This works great when the data you're working with in your application is a JavaScript object. As an example:
var obj = {
key1: value1,
key2: value2
};
$.ajax({
type: "GET",
url: "www.example.com",
data: obj
});
Results in the called url being:
www.example.com?key1=value1&key2=value2
as jQuery does the data conversion behind the scenes for you. However, according to the docs:
data parameter:
Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key based on the value of the traditional setting (described below).
and
processData parameter:
By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data, set this option to false.
setting processData to false will prevent the default data manipulation and conversion from an Object format to a suitable url String. Instead, the data will be converted using the .toString() native method on the Object prototype by the browser automatically when the url is called. Here is how that appears:
var obj = {};
alert(obj.toString());
So now, since the default processing is off, your data example becomes the following:
var obj = {
key1: value1,
key2: value2
};
$.ajax({
type: "GET",
url: "www.example.com",
data: obj,
processData: false
});
Results in the called url being:
www.example.com?[object%20Object]
like you see above in the mini-code snippet with the extra addition of %20 as the url encoding value of a space, as noted in RFC 3986 and updated by RFC 6874 and RFC 7320.
Edit to elaborate on why Datatables is causing the above issue:
To further address your question of why it only appears to happen with datatables .load(), it appears the datatables ajax object is a wrapper for jQuery's default $.ajax(). In the docs for $.ajax() the type parameter is defaulting to GET when not directly specified. So datatables initiates a GET request and, with processData set to false, the above scenario happens.
