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()?

@MuhammadIrfan i attached the screen shot, please have a look — OPK, Aug 31 '15 at 20:01
I tried your code without passing any values in the textbox and it worked fine. I am guessing the problem could be the action url. Does it exist? Can you verify that? — JGV, Aug 31 '15 at 20:03
try dataType: "jsonp", instead of dataType: "json", and let me know ok — Irfan Anwar, Aug 31 '15 at 20:04
@VimalanJayaGanesh yes. the url is valid. It is the matching url for my back-end controller. — OPK, Aug 31 '15 at 20:08
One observation is, you have both form action and ajax url in your code. Can you replace input type="submit" with just a normal button and handle the click event instead? — JGV, Aug 31 '15 at 20:13
It's a server-side error most likely or the request is not hitting the right URL. Check on the network tab of your browser. — MinusFour, Aug 31 '15 at 20:20
@MinusFour I updated the error message to the OP, please advise. — OPK, Aug 31 '15 at 20:37
@VimalanJayaGanesh I updated the OP, and the error message is shown in my alter box, please see my updated post and advise. — OPK, Aug 31 '15 at 20:38
JSON should be passed as-is into your `data` parameter, there is no need to stringify it. — Terry, Aug 31 '15 at 20:38
400 means malformed syntax. If you are sure that the JSON you are sending to the URL is valid, have you checked what is the format of the data the script (at the recipient URL) expects? If it is not set up to parse JSON but something else, it will of course throw a parse error: see http://stackoverflow.com/questions/19671317/400-bad-request-http-error-code-meaning — Terry, Aug 31 '15 at 20:46

score 0 · Answer 1 · answered Aug 31 '15 at 20:46

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

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

1 Answers1