AJAX Post no longer works when using DataTables

MoeYehya

Are we able to make a post request instead of get inside ajax datatables generate method?

_ const url = ${AppRuntime.baseUrl}/${props.entity}/Table/False?${$.param(requestBody)};
var table = window.$(#table${props.tableId}).DataTable({
"ajax": {
"url": url,
"type": "POST", // Change request type to POST_

kthorngren

Yes it can be used. The ajax docs state this:

object
Description:
As an object, the ajax object is passed to jQuery.ajax allowing fine control of the Ajax request.

The type will be passed through to jQuery ajax().

Use the browser's network inspector tool to see the XHR request and response.

Kevin

MoeYehya

okay but when it was a get request i was adding some quert parameters like this : var table = $(#table).DataTable({
"ajax": {
"url": AppRuntime.baseUrl + '/' + props.entity + '/Table/' + (props.datasource ? props.datasource : ""),
"type": "GET",
"data": {
"id": 0,
"inputVal": "",
"queryParameters[0]": props.queryParameters ? props.queryParameters[0] : []

},

now it becomes post request and i am sending different thing in data (body).
_ how i can add extra query parameters for it?
_

kthorngren

Take a look at the ajax.data docs and this example for sending data parameters.

Kevin

MoeYehya

can you please tell me if there is anything wrong in this?

    const requestBody = {
        id: 0,
        inputVal: "",
        "queryParameters[0]": []
    };
    const url = `${AppRuntime.baseUrl}/${props.entity}/Table/False?${$.param(requestBody)}`;

    var table = window.$(`#table${props.tableId}`).DataTable({
        "ajax": {
            "url": url,
            "type": "POST", // Change request type to POST
            "contentType": "application/json",
            "beforeSend": function (request) {
                request.setRequestHeader("tenant", AppRuntime.tenantId);
                request.setRequestHeader("department", AppRuntime.departmentId);
                request.setRequestHeader("userId", AppRuntime.userId);
            },
            "data": JSON.stringify(props.queryParameters[0]),
     }

allan

Nothing that I can see. Does it show work for you? In what way is it not working? What is props.queryParameters[0]? If you link to a test case showing the issue, that might help us help you.

"queryParameters[0]": []

Is unusual, but it isn't used in the above code, so irrelevant.

Allan

MoeYehya

this is not the problem.. the request is returning not found. the query parameters that should be filled by datatables is not showing in url when we changed it to post request.

but it is working completely fine in get request.

is it something in datatables?

kthorngren

When sending data using GET the data is sent in the URL. When sending data via POST the data is not sent in the URL but in a header in the AJAX request. This is standard jQuery ajax() protocol not Datatables specific. You will need to review the documentation for your server side language to learn how to process POST data as it will be different.

Use the browser's network inspector tool to verify the data parameters sent are correct.

Kevin