我在我的web应用程序中显示html表格的json响应时出现了一些问题。jQuery DataTable + Spring MVC + JSP + Json
我使用Spring引导，Bootstrap，JSP查看和jQuery DataTable以表格形式显示数据。
数据处理是正确的：我有一个导航栏，所以我点击这个，显示一个表格来查询数据库，选择参数并点击“搜索”。 在此之后，在主页面的正确的div（我们不'想要改变页面，而只是重新加载主页的div），我可以正确地看到头表（隐藏之前点击搜索按钮），如果我点击CTRL在Firefox上+ shift + k并在网络中看到我可以获得200的状态;此外，如果我点击事件并检查响应标签，我可以正确地看到json格式的数据，但我无法在页面上看到数据。 所以，我认为我的错误是在我使用Datatable。
这是JSP在那里我必须证明数据响应：
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<script type="text/javascript" class="init">
$(document).ready(function() {
$('#firewalldata').DataTable(
{
"ajax": '../getfirewall.json',
"columns":
[
{ "data": "id" },
{ "data": "ip" },
{ "data": "info" },
{ "data": "name" }
]
});
});
</script>
<div class="container" align="center">
<h1>Firewall List</h1>
<table class = "table table-bordered" id="firewalldata">
<thead>
<tr>
<th>ID</th>
<th>IP</th>
<th>INFO</th>
<th>Name</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
这是控制器的方法：
@PostMapping(value="/getfirewall.json")
@ResponseBody
public ModelAndView listFirewall(ModelAndView model, HttpServletRequest request,
@RequestParam(name="id", required=false) String id,
@RequestParam(name="info", required=false) String info,
@RequestParam(name="ip", required=false) String ip,
@RequestParam(name="firewallname", required=false) String name) throws IOException
{
//First, we compile the list to shown result
List<Firewall> listFirewall = firewalls.getFirewall(id, info, ip, name);
//Second, we put this list in the model and set the name of the view
model.addObject("listFirewall", listFirewall);
//Finally, we return the model
return model;
}
怎么可以看到，控制器简单地调用DAO中定义的方法类从数据库中获取防火墙列表及其数据。
我在做什么错？
编辑：为问，这是JSON响应，我可以在点击后ctrl在Firefox上看到的片段+ shifr + K：
EDIT2：脚本，下面的答案后，现在是这样的：
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css">
<script type="text/javascript" class="init">
$(document).ready(function() {
$('#firewalldata').DataTable(
{
"processing": true,
"ajax":{
"url": "../getfirewall.jsp",
dataSrc: ''
},
"columns": [
{ "data": "id" },
{ "data": "ip" },
{ "data": "info" },
{ "data": "name" }
]
});
});
</script>
现在，当我开始我的应用程序我得到这个消息：数据表警告：表ID = firewalldata - 阿贾克斯错误。有关此错误的更多信息，请参阅http://datatables.net/tn/7
并且当我检查时，我在/getfirewall.jsp上发生了404错误;然后，当我尝试使用搜索表单时，我只能看到1行，“加载”和“显示0条目的0到0”。
Edit3：我正在继续纠正这个问题。问题仍然存在，但我有新的分析：因为我得到了/ getfirewall.json上的4o4错误，我试图在我的酒吧数字，我有一个空白页;如果我分析它，我可以认为这个身体是真实的。但是，如果我回到主页面，在表单提交之后，我在响应部分中以Json格式很好地形成了数据。
什么，我不明白是两两件事：
1）为什么页面/getfirewall.json是空的，没有数据，但如果我在申请页面提交表单我能得到JSON响应？
2）我得到了错误，当我打开浏览器，启动应用程序后，我得到了错误。但为什么？如果我必须在表单提交后收集数据，为什么我的应用程序立即搜索它们？
编辑4，19/05/2017
好吧，oter审查之后，这是我的实际代码：
<script type="text/javascript" class="init">
$(document).ready(function() {
$('#firewalldata').dataTable(
{
"processing": true,
"serverSide": true,
"ajax":{
url: "../getfirewall.json",
type: "post",
dataSrc: ""
},
"columns": [
{ "data": "id" },
{ "data": "ip" },
{ "data": "info" },
{ "data": "name" }
]
});
});
</script>
随着交行，我可以解决这个问题，404;我添加了处理行，因为没有它，我得到了“找不到数据”错误。
其实代码还不完美;提交搜索后，我得到了一个“未找到匹配的错误”。
FINAL编辑。
我在与同事交谈后解决了这个问题。问题在于“标准”语法不足以模拟我的页面，主要是为了在同一页面上重定向而上传div。我把代码放在这里，希望可以帮助其他程序员解决我的问题。
首先，我向控制器添加了一些组件，我在jQuery数据表页上看到了Json响应：recordsTotal和recordsFiltered。所以，我的代码变成了：
@PostMapping(value="/getfirewall.json")
@ResponseBody
public ModelAndView listFirewall(ModelAndView model, HttpServletRequest request,
@RequestParam(name="id", required=false) String id,
@RequestParam(name="info", required=false) String info,
@RequestParam(name="ip", required=false) String ip,
@RequestParam(name="firewallname", required=false) String name) throws IOException
{
//First, we compile the list to shown result
List<Firewall> listFirewall = firewalls.getFirewall(id, info, ip, name);
//Second, we put this list in the model and set properties for jquery datatables
model.addObject("recordsTotal", listFirewall.size());
model.addObject("recordsFiltered", listFirewall.size());
model.addObject("data", listFirewall);
//Finally, we return the model
return model;
}
然后，我在网页中添加（我记得我必须更新主页的div并在新页面不加载搜索结果），这个脚本序列化jJson响应：
(function($){
$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
})(jQuery);
最后，我在firewall.jsp页面中添加了extend元素，以模拟从Jackson获得的Json;因此，脚本成了这样：
<script type="text/javascript" class="init">
var DTfirewall = false;
$(document).ready(function() {
DTfirewall = $('#firewalldata').DataTable(
{
"serverSide": true,
"ajax":{
url: "../getfirewall.json",
type: "post",
"data": function (d) {
d = $.extend(d, {
firewallname : $('#firewallname').val()
});
}
},
"columns": [
{ "data": "id" },
{ "data": "ip" },
{ "data": "info" },
{ "data": "name" }
]
});
});
</script>
能你分享你从控制器收到的JSON？ –