在 jQuery 中使用 $.ajax() 函数调用时没有传递任何 JSON 对象答案

【问题标题】：No JSON object gets passed when using $.ajax() function call in jQuery在 jQuery 中使用 $.ajax() 函数调用时没有传递任何 JSON 对象
【发布时间】：2015-11-25 22:25:49
【问题描述】：

我编写这段代码是为了从 HTML 表中捕获用户输入数据，然后使用 ajax 将其传递到后端。请注意，在以下代码中的 $.ajax() 函数调用之前，我能够看到控制台的输出，这意味着第 15 行之前的任何代码都可以正常工作。屏幕截图是代码第 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
            }
        );

我从更改框中收到此错误消息：

jqXHR: 200

文本状态：解析器错误

errorThrown: SyntaxError: 输入意外结束

这是 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>

我没有包含后端java代码，因为我已经知道$.ajax()不能正常工作，如果你认为有必要，我会添加后端代码。

谁能告诉我哪里做错了？为什么没有JSON 数据通过$.ajax() 发布？

【问题讨论】：

你能显示第 15 行的输出吗，我的意思是第 15 行的 console.log
@MuhammadIrfan 我附上了屏幕截图，请看一下
我尝试了您的代码，但没有在文本框中传递任何值，它运行良好。我猜问题可能是操作网址。它存在吗？你能验证一下吗？
试试 dataType: "jsonp"，而不是 dataType: "json"，然后告诉我好吗
400 表示语法错误。如果您确定发送到 URL 的 JSON 是有效的，您是否检查过脚本（在接收 URL 处）期望的数据格式是什么？如果没有设置解析 JSON 而是其他的，它当然会抛出解析错误：见stackoverflow.com/questions/19671317/…

标签： javascript jquery ajax json

【解决方案1】：

您应该直接以 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

或发送包含您的序列化数据的 JSON：

$.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

【讨论】：