【发布时间】：2017-10-15 04:36:53
【问题描述】：
我在我的网络应用程序中以 html 表的形式显示 json 响应时遇到了一些问题。
我使用 Spring boot、Bootstrap、JSP 进行视图，使用 jQuery DataTable 以表格形式显示数据。
数据处理是正确的：我有一个导航栏，所以我点击这个，显示一个表格来查询一个数据库，选择参数并点击“搜索”。 在此之后，在主页的右侧 div 中（我们不想更改页面，而只是重新加载主页的 div）我可以正确地看到标题表（在单击搜索按钮之前隐藏）并且如果我单击 ctrl+在 Firefox 上 shift+k 并在 Network 中查看我可以获得 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 类中定义的方法即可从数据库中获取防火墙列表及其数据。
我做错了什么？
编辑：如被问及，这是我在点击 ctrl+shifr+k 后可以在 firefox 上看到的 Json 响应的片段：
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>
现在，当我启动我的应用程序时，我收到以下消息：DataTables 警告：表 id=firewalldata - Ajax 错误。有关此错误的更多信息，请参阅http://datatables.net/tn/7
当我检查时，我在 /getfirewall.jsp 上出现 404 错误；然后，当我尝试使用搜索表单时，我只能看到 1 行，带有“正在加载”和“显示 0 到 0 个条目，共 0 个条目”。
Edit3：我正在继续纠正这个问题。问题仍然存在，但我有新的分析：因为我在 /getfirewall.json 上遇到了 4o4 错误，我试图在我的栏中输入数字，但我有一个空白页；如果我分析它，我可以确定身体是空的。但是，如果我回到主页，在提交表单后，我在响应部分中会看到格式良好的 Json 格式的数据。
我不明白的是两件事：
1) 为什么页面 /getfirewall.json 是空的，没有数据，但是如果我在应用程序页面中提交表单，我可以得到 json 响应？
2) 当我打开浏览器，启动应用程序后，我得到了错误，我得到了错误。但为什么？如果我必须在提交表单后获取数据，为什么我的应用程序会立即搜索它们？
编辑 4，2017 年 5 月 19 日
好的，经过审核，这是我的实际代码：
<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 问题；我添加了处理行，因为没有它我得到一个“未找到数据”错误。
其实代码还不完善；提交搜索后，我得到了“找不到匹配的错误”。
最终编辑。
在与一些同事交谈后，我解决了这个问题。问题是“标准”语法不足以为我的页面建模，主要用于在上传 div 的同一页面上进行重定向。我把代码放在这里，希望可以帮助其他程序员解决我同样的问题。
首先，我在 jquery Datatable 页面上的 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 吗？
标签： javascript jquery json spring jsp