Ajax post 到 spring 刷新数据表的 mvc 控制器

Question

我正在尝试创建元数据存储，它使用网络图形用户界面搜索数据。该应用程序是在我的 spring 应用程序中使用 ajax 和数据 table 构建的。

背景：

搜索区域如下图：

====================================================================
=  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   =
====================================================================

Search.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

表单包含 bootstrap 个日期时间选择器，提交表单的按钮是

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

问题：

如果能帮助我理解如何将表单连接到 table，我将不胜感激。例如，如果我按下搜索按钮，开始日期和停止日期将发送到控制器，控制器将搜索数据并将 return 结果发送到 table，使用 [=61= 自动刷新]

我的做法对吗？
我的代码中是否有多余的部分？
我应该如何将日期值传递给控制器？
当我按下搜索按钮时，我应该如何传递数据table 初始值？

目前我收到以下错误：

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

有人能帮忙吗？

谢谢

Answer 1

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

"data" : aoData,

服务器端：

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

一种方法是，在服务器端获取DTO（数据传输对象）中的数据，它不过是一个包含多个字段的对象，对应于您要发送的多个数据。因此，获取该自定义对象中的所有数据，并从该对象中获取个人数据。

目前您正在发送一个对象，但您必须期望 3 个，其中第一个是一个数字。因此错误。

Ajax post 到 spring 刷新数据表的 mvc 控制器

Ajax post to spring mvc controller which refresh datatables

javascript

jquery

spring-mvc

datatables

背景：

问题：