在jQuery

Question

我编写了这段代码，以便从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

     

textStatus：parsererror

     

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()数据？

Answer 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