我在我的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？ –