应用程序加载时jQuery数据表错误7:404

时间:2017-08-29 07:40:02

标签: javascript jquery ajax spring

我的应用程序中有一个奇怪的情况。

我在其上添加了一个新的部分,我必须使用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">&times;</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;
    }

如果您需要其他详细信息,请告诉我,我会提供给他们。

1 个答案:

答案 0 :(得分:0)

成立。由于输入参数都是选项,问题是我忘了在控制器方法中为每个参数设置required=false