我的应用程序中有一个奇怪的情况。
我在其上添加了一个新的部分,我必须使用jQuery Data Table来显示结果。
在应用加载时,我收到了关于我的表的警告错误:
DataTables警告:table id = scansdetailsdata - Ajax错误。更多 有关此错误的信息,请参阅http://datatables.net/tn/7
所以我看到了Firefox控制台告诉我的内容,我在网址上收到了404错误:
http://localhost:8080/getscans.json
所以,首先,我检查了数据表中的ajax参数和控制器中@PostMapping
的值,看起来没问题。
奇怪的是,如果我继续使用我的应用程序,查询必须显示给该URl的数据,该应用程序运行正常,没有问题:我可以显示数据,编辑它们并保存我的数据库中的更改问题。这给我留下了深刻的印象,特别是因为在我之前遇到这种情况时,如果我试图使用该应用程序,它就无法正常工作。
无论如何,这是“有罪”的代码。
数据表填充的表:
<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" src="../../static/js/custom/scansdetailsdatatable.js"></script>
<script type="text/javascript" class="init" src="../../static/js/custom/moment.js"></script>
<div class="container" align="center">
<h1>Scans Details List</h1>
<table class = "table table-bordered" id="scansdetailsdata">
<thead>
<tr>
<th>Scan Items ID</th>
<th>Edit</th>
<th>Tag</th>
<th>Date</th>
<th>Status</th>
<th>Closing Date</th>
<th>Host</th>
<th>Port</th>
<th>Severity</th>
<th>Plugin ID</th>
<th>Info</th>
<th>Notes</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div id="myModalForScansSearch" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Editing Menu</h4>
</div>
<div class="modal-body">
<form id="updatescansearchform" class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label"
for="inputNotes">Notes</label>
<div class="col-sm-10">
<input type="text" class="form-control"
id="newscanitemsnote" name ="newscanitemsnote" placeholder="Put here the note"/>
</div>
</div>
<div class="form-group">
<label for = "type" class = "col-sm-2 control-label">Status</label>
<div class = "col-sm-10">
<select class = "form-control" id = "newscanitemsstatus" name="newscanitemsstatus">
<option value="open">open</option>
<option value="closed">closed</option>
</select>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success" data-dismiss="modal">Save</button>
</div>
</div>
</div>
数据表代码:
/**
* This script define the use of jquery DataTable for scans response,
* used to format faster and simpler the table showed in table.
*
* @author cte0324
*/
var DTscans = false;
var id_scan_items = 0; //this variable is used to check the data column id and pass it to controller via ajax
var closing_date; //this variable is used to set up the closing date of events after System Administrator action.
$(document).ready(function() {
DTscans = $('#scansdetailsdata').DataTable(
{
"serverSide": true,
"ajax":{
url: "../getscans.json",
type: "post",
"data": function (d)
{
var param = {tag : $('#tag').val(), scanstatus : $('#scanstatus').val(), scanseverity : $('#scanseverity').val(), scanhost: $('#scanhost').val(),
scanport: $('#scanport').val(), pluginid: $('#pluginid').val(), scaninfo : $('#scaninfo').val()};
return $.extend(d, param);
}
},
"columnDefs": [
{
"targets": [ 0 ],
"visible": false
}],
"columns": [
{ "data": "id" },
{ "data": null,
"render": function ( data, type, full, meta ) {
return "<button type='button' class='btn btn-info btn-md' data-toggle='modal' data-target='#myModalForScansSearch' onclick=\'id_scan_items="+data.id+"\'> Edit </button>";
}
},
{ "data": "scans_name" },
{ "data": "scans_date",
"render": function(data){
return (moment(data).isValid()) ? moment(data).format("DD MMM YY") : "-";}
},
{ "data": "status" },
{ "data": "closing_date",
"render": function(data){
return (moment(data).isValid()) ? moment(data).format("DD MMM YY") : "-";}
},
{ "data": "name" },
{ "data": "port" },
{ "data": "severity" },
{ "data": "pluginID" },
{ "data": "info" },
{ "data": "note" }
]
} );
//This function is used to send the form data to Spring controller; cause we use a modal, with code that must be put in the file with html table head,
//we must replace the use of view made by jsp using an ajax function
$('#myModalForScansSearch').on('click', '.btn.btn-success', function(event) {
var form = $('#updatescansearchform'); //recover the form inside modal by using id
var formdata = form.serializeObject(); //use the serializeObject function to prepare data for Json format
closing_date = new Date().getTime(); //set up the closing date with the current date
formdata.idscanitems = id_scan_items; //add the event id to form data, after setting it with the IDnumber variabile
formdata.new_closing_date = closing_date; //add the closing date to form data
console.log(formdata, this);
event.preventDefault();
//here starts the code to sending data to Spring controller
$.ajax({
url: "../updatescannoteandstatus.json",
type: "post",
data: formdata,
success : function() {
console.log("Invio riuscito.");
console.log(moment(closing_date).format('DD/MM/YYYY'));
DTscans.ajax.reload( null, false ); //we reload the table, showing immediately the data updated.
}
});
});
} );
Spring Controller:
/**
* Return the details of scans, based on joining scans with
* scan_items and hosts.
*
* @param model
* @param request
* @param name
* @param type
* @param date
* @return
* @throws IOException
*/
@PostMapping(value="/getscans.json")
@ResponseBody
public ModelAndView getScansDetails(ModelAndView model, HttpServletRequest request,
@RequestParam(name="tag") String tag,
@RequestParam(name="scanstatus") String scanstatus,
@RequestParam(name="scanseverity") String scanseverity,
@RequestParam(name="scanhost") String scanhost,
@RequestParam(name="scanport") String scanport,
@RequestParam(name="pluginid") String pluginid,
@RequestParam(name="scaninfo") String scaninfo) throws IOException
{
//First, we pass the data to DAO method
List<ScanItems> listScanItems = networks.joinScanItemsAndScansAndHosts(tag, scanhost, scanport, scanstatus, scanseverity, pluginid, scaninfo);
//Second, we put results in the model, with a map, and set properties for jquery datatables
model.addObject("recordsTotal", listScanItems.size());
model.addObject("recordsFiltered", listScanItems.size());
model.addObject("data", listScanItems);
//Finally, we return the model
return model;
}
如果您需要其他详细信息,请告诉我,我会提供给他们。
答案 0 :(得分:0)
成立。由于输入参数都是选项,问题是我忘了在控制器方法中为每个参数设置required=false
。