私はWebアプリケーションでjson応答をhtmlテーブルの形式で表示することにいくつか問題があります。jQuery DataTable + Spring MVC + JSP + Json
私は、Springのブート、ブートストラップ、ビューのJSP、およびテーブルの形式でデータを表示するためのjQuery DataTableを使用しています。
データ処理は正しいです：私はnavbarを持っていますので、これをクリックして、dbを照会するフォームを表示し、パラメータを選択して "Search"をクリックします。 この後、メインページの右側のdiv（私たちは 'ページを変更したいのではなく、ホームページのdivをリロードする）をすると、ヘッダテーブル（検索ボタンをクリックする前に非表示）が正しく表示され、 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で定義されたメソッドを呼び出しますクラスを使用して、DBからファイアウォールのリストを取得します。
私は間違っていますか？
EDIT：尋ねたとして、これは私が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>
今、私はこのメッセージを得た：DataTableの警告：テーブルID = firewalldata - Ajaxのエラー。このエラーの詳細については、http://datatables.net/tn/7
を参照してください。検査すると、/getfirewall.jspで404エラーが発生します。検索フォームを使用しようとすると、「読み込み中」と「0エントリの0〜0エントリを表示」という行が1行しか表示されません。
Edit3：この問題を修正し続けます。問題は解決しませんが、私は分析について新しいことがあります。原因は/getfirewall.jsonに4o4エラーがあり、私のバーで数字を表示しようとしましたが、空白のページがあります。私がそれを分析すれば、私は身体が満腹だと見ることができます。しかし、私がメインページに戻ってくると、フォームが提出された後、私は、レスポンスセクションで、データがJson形式でうまく形成されます。ページ/getfirewall.jsonはデータなしで、空のですが、私は、アプリケーションのページにフォームを送信した場合、私はJSONレスポンスを得ることができる理由
1）：私は理解していない何
は2つのことがありますか？
2）アプリケーションを起動した後にブラウザを開いたときにエラーが表示され、エラーが発生しました。しかし、なぜ？フォーム送信後にデータを取得する必要がある場合、私のアプリがすぐに検索するのはなぜですか？
編集4、19/05/2017
[OK]を、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 DatatableページのJsonレスポンスに表示されるいくつかのコンポーネントをcontrolerに追加しました。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を共有しますか？ –