No JSON object gets passed when using $.ajax() function call in jQuery

Question

I wrote this piece of code in order to catch the user input data from a HTML table, and then using ajax to pass it to the back end. Note before the $.ajax() function call in the following code, I was able to see the output from the console, this means any code before line 15 is working properly. The screen shot is the output from code line 15:

$('form').submit(                                                            //line 1
            function(e) {                                                    //line 2
                e.preventDefault();                                          //line 3
                var header = $('table thead tr th').map(function() {         //line 4
                return $(this).text();                                       //line 5
                });                                                          //line 6

                var tableObj = $('table tbody tr').map(function(i) {         //line 7
                var row = {};                                                //line 8
                $(this).find('td').each(function(i) {                        //line 9
                    var rowName = header[i];                                 //line 10
                    row[rowName] = $(this).find("input").val();              //line 11
                });                                                          //line 12
                    return row;                                              //line 13
                }).get();                                                    //line 14
                console.log(tableObj);                                       //line 15

                $.ajax({
                 url:"/spring-mvc-webapp/jsondata",
                 type:'POST',
                 data :JSON.stringify(tableObj),
                 dataType: "json",
                 contentType : 'application/json; charset=utf-8',
                 success:function(result){console.log(result);},
                 error: function (jqXHR, textStatus, errorThrown) {
                    alert("jqXHR: " + jqXHR.status + "\ntextStatus: " + textStatus + "\nerrorThrown: " + errorThrown);
                }
                });//end ajax
            }
        );

I got this error message from the alter box:

jqXHR: 200

textStatus: parsererror

errorThrown: SyntaxError: unexpected end of input

Here is the HTML:

<form action="/spring-mvc-webapp/jsondata" method="post">

        <table>
            <thead>
                <tr>
                    <th>Gross Weight</th>
                    <th>Tare Weight</th>
                    <th>Price Per Pound</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td><input type="text" /></td>
                    <td><input type="text" /></td>
                    <td><input type="text" /></td>
                </tr>
                <tr>
                    <td><input type="text" /></td>
                    <td><input type="text" /></td>
                    <td><input type="text" /></td>
                </tr>
            </tbody>
        </table>
        <input type="submit" />
    </form>

I did not include back-end java code because I already know that the $.ajax() is not working properly, if you think it is necessary, I will add the back-end code.

Can anyone tell me where I did wrong? Why no JSON data gets posted through $.ajax() ?

Answer 1

You should send your data directly as JSON:

$.ajax({
    url:"/spring-mvc-webapp/jsondata",
    type:'POST',
    data :tableObj,
    dataType: "json",
    contentType : 'application/json; charset=utf-8',
    success:function(result){console.log(result);},
    error: function (jqXHR, textStatus, errorThrown) {
        alert("jqXHR: " + jqXHR.status + "\ntextStatus: " + textStatus + "\nerrorThrown: " + errorThrown);
    }
});//end ajax

Or send a JSON containing your serialized data:

$.ajax({
    url:"/spring-mvc-webapp/jsondata",
    type:'POST',
    data : { data: JSON.stringify(tableObj) },
    dataType: "json",
    contentType : 'application/json; charset=utf-8',
    success:function(result){console.log(result);},
    error: function (jqXHR, textStatus, errorThrown) {
        alert("jqXHR: " + jqXHR.status + "\ntextStatus: " + textStatus + "\nerrorThrown: " + errorThrown);
    }
});//end ajax