Ajax post to spring mvc controller which get the data and set to datatables

Question

I am trying to send a POST request with some data to spring boot controller using DataTable Ajax request and set the data into Table.

HTML Table:

<table id="assignmentDetails" class="display" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>Id</th>
                                            <th>title</th>
                                            <th>doc</th>
                                            <th>end</th>
                                            <th>start</th>
                                           
                                        </tr>
                                    </thead>
                                </table>

JQuery:

    $(document).ready(function(){
    $('#collapse'+id).on('shown.bs.collapse', function() {
        $('#assignmentDetails').DataTable({
            "ajax": {
                "url": "http://localhost:9091/assignment/getassignments",
                "dataSrc": '',
                "method": "POST",
                "timeout": 0,
                "headers": {
                  "Content-Type": "application/json"
                  },
                  "data":         JSON.stringify({"moduleId":"10010","subModuleId":null}),
                },
                "columns": [
                { data: "Id" },
                { data: "title" },
                { data: "doc" },
                { data: "start" },
                { data: "end" },
            ]
        } );
    });
            
});

After sending request on server I am getting Status Code 400 error. Console Error:

2020-07-24 14:26:53.963 WARN 2724 --- [nio-9091-exec-7] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Unexpected character ('=' (code 61)): Expected space separating root-level values; nested exception is com.fasterxml.jackson.core.JsonParseException: Unexpected character ('=' (code 61)): Expected space separating root-level values at [Source: (PushbackInputStream); line: 1, column: 3]]

Can anyone help me send POST request to server using datatable post reqeust

Answer 1

After spending 2 day on it for sending POST request in jQuery Ajax call with parameters and get the Response.

jQuery

$("#demoButton").on('click', function(){
        var getData={};
        getData["mId"]=$("#mId").val();
        getData["sId"]=$("#sId").val();
    
         var tabla = $('#dataTable').DataTable( {

            ajax: {
                url: getDataURL,
                datatype : 'json',
                data : function (  ) {
                    return JSON.stringify(getData);
                },
                "type": "POST",
                "headers": {
                    "Content-Type": "application/json"
                  },
                  "dataSrc": function(data){
                      return data;
                  }
                
            },
            "columns": [
                { data: "Id"},
                { data: "key2" },
                { data: "key3" },
                { data: "key4" },
            ]
        } );
    })
}); // end of jQuery function

<button id="demoButton">Demo Button</button>
    <table id="dataTable" class="display" style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>Value2</th>
                                            <th>Value3</th>
                                            <th>Value4</th>
                                        </tr>
                                    </thead>            
   </table>

Answer 2

If it's saying unexpected character, the JSON you are sending to your controller is probably not valid. In your browser, open the developer tools and try checking the 'network' tab. Normally, you can find the actual JSON that is being sent and check if there's nothing fishy going on with it.

I'd also suggest using the jQuery post function, but that was not part of your question ;)