Ajax发布到springmvc控制器,用于刷新数据表

Ajax post to spring mvc controller which refresh datatables

本文关键字:用于 刷新 数据表 控制器 springmvc Ajax      更新时间:2023-09-26

我正在尝试创建一个元数据存储区,该存储区使用web gui搜索数据。该应用程序是在我的spring应用程序中使用ajax和数据表构建的。

背景:

搜索区域如下所示:

====================================================================
=  Start Date           =   Table                      search[  ]  =                  
=  ___________________  =   -------------------------------------  =         
= |2012-12-11 09:24:03| =   -                                   -  = 
=                       =   -                                   -  =
=  Stop Date            =   -                                   -  =                                      
=  ___________________  =   -                                   -  =
= |2012-12-11 09:24:40| =   -                                   -  =
=                       =   -                                   -  =       
=  Duration >           =   -                                   -  =                                      
=  ___________________  =   -                                   -  =
= |     00:4:40       | =   -                                   -  =
=                       =   -                                   -  =
=  ___________________  =   -                                   -  =
= |     Search        | =   -------------------------------------  =
=                       =   showing 1 of 2000 entries     Page 1   =
====================================================================

搜索.js

var table;
var searchpage = document.getElementsByTagName('base')[3].href;
searchRecording=function() 
{
    var startDate = $('#startDate').data('date');
    var stopDate = $('#stopDate').data('date');
    var duration = $('#duration').data('date');
    $.ajax({
        "type": 'POST',
        "url": searchpage,
        "data": JSON.stringify({
            "startDate": startDate,
            "stopDate": stopDate,
            "duration": duration,
        }),
         success : function(response) {  
              alert(response);   
             },  
             error : function(e) {  
              alert('Error: ' + e);   
             },  
        contentType: "application/json",
        dataType: "json"
    });
}
window.searchBtn.onclick = function() 
{
    return function() 
    {
        searchRecording();
    }
}();
var searchBtn = document.getElementById("searchBtn");
table = $('#table').DataTable({
        "bProcesing" : true,
        "bServerSide" : true,
        "bLenthChange" : false,
        "lengthMenu": [[10, 15, 20, 25, 50], [10, 15, 20, 25, 50]],
        "iDisplayLength" : 10,
        "iDisplayStart": 0,
        "sEcho":1,
        "sAjaxSource":searchpage,
        "fnServerData": function(searchpage, aoData, fnCallback) 
        {
                        $.ajax({
                         "dataType" : 'json',
                         "type" : "POST",
                         "url" : searchpage,
                         "data" : aoData,
                         "success" : fnCallback
                        });
                    },  
        "columns": [
                    { data: "id" },
                    { ....Other Columns.... } ,
                   ]
    });

SearchController.java(控制器)

@RequestMapping(value = "/searchpage", method = RequestMethod.POST, produces = "application/json")
    public @ResponseBody String showRecordings(
            @RequestParam (required=true) int sEcho,   
            @RequestParam (required=true) int iDisplayStart,   
            @RequestParam (required=true) int iDisplayLength    
            ) 
    {
        System.out.print(sEcho+" ");
        System.out.print(iDisplayStart+" ");
        System.out.println(iDisplayLength+" ");

        //String startDate = (String) data.get("startDate");
        //String stopDate = (String) data.get("stopDate");
        //String duration = (String) data.get("duration");

        DataTablesTO<Rec> dt = new DataTablesTO<Rec>();
        List<Rec> recs = recordingsService.getAllRecs(iDisplayStart, iDisplayLength);
        Long size = recordingsService.getAllRecsSize();
        dt.setAaData(recs);                      // This is the dataset reponse to client
        dt.setiTotalDisplayRecords(size.intValue()); // the total data in  db for datatables to calculate page no. and position
        dt.setiTotalRecords(size.intValue());        // the total data in db for datatables to calculate page  no.
        dt.setsEcho(sEcho);
        return toJson(dt);
    }
    private String toJson(DataTablesTO<?> dt) 
    {
        ObjectMapper mapper = new ObjectMapper();
        try 
        {
            return mapper.writeValueAsString(dt);
        } 
        catch (JsonProcessingException e) 
        {
            e.printStackTrace();
            return null;
        }
    }

Search.jsp

表单包含引导日期时间选择器,提交表单的按钮是

<button id="searchBtn" class="btn btn-primary" type="button">Search</button>

问题:

如果能帮助我理解如何将表格与表格联系起来,我将不胜感激。例如,如果我按下搜索按钮,开始日期和停止日期会发送到控制器,控制器会搜索数据并将结果返回到使用ajax 自动刷新的表

  • 我的方法正确吗
  • 我的代码中有多余的部分吗
  • 我应该如何将日期值传递给控制器
  • 当我按下搜索按钮时,我应该如何传递数据表初始化值

目前我得到以下错误:

org.springframework.web.bind.MissingServletRequestParameterException: Required int parameter 'sEcho' is not present

有人能帮忙吗?

感谢

从客户端发送所需数据和从服务器端获取数据的方法不同。您从客户端发送一个对象,但在服务器端需要3个。客户端:

"data" : aoData,

服务器端:

@RequestParam (required=true) int sEcho,   
@RequestParam (required=true) int iDisplayStart,   
@RequestParam (required=true) int iDisplayLength   

一种方法是,在服务器端获取DTO(数据传输对象)中的数据,DTO只是一个包含多个字段的对象,这些字段对应于您正在发送的多个数据。所以,把所有的数据都放在那个定制的卑鄙小人里,然后从那个定制中得到单独的数据。

目前您正在发送一个对象,但您必须期望3,其中第一个是数字。从而产生误差。