[英]No JSON object gets passed when using $.ajax() function call in jQuery
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. 我编写了这段代码是为了从HTML表中捕获用户输入的数据,然后使用ajax将其传递给后端。 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. 请注意,在以下代码中调用
$.ajax()
函数之前,我能够看到控制台的输出,这意味着第15行之前的任何代码均能正常工作。 The screen shot is the output from code line 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
}
);
I got this error message from the alter box: 我从更改框收到此错误消息:
jqXHR: 200
jqXHR:200
textStatus: parsererror
textStatus:parsererror
errorThrown: SyntaxError: unexpected end of input
errorThrown:SyntaxError:输入意外结束
Here is the HTML: 这是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. 我没有包含后端Java代码,因为我已经知道
$.ajax()
不能正常工作,如果您认为有必要,我将添加后端代码。
Can anyone tell me where I did wrong? 谁能告诉我我做错了什么? Why no
JSON
data gets posted through $.ajax()
? 为什么没有
$.ajax()
发布JSON
数据?
You should send your data directly as JSON: 您应该直接将数据作为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: 或发送包含序列化数据的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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.