Ajax发布弹簧mvc控制器刷新数据表

Question

我想创建一个元数据存储使用web gui搜索数据。该应用程序是在我的spring应用程序中使用ajax和datatables构建的。

背景：

的搜索区域，如下所示：

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

表单包含引导datetimepickers并提交表单的按钮

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

问题：

如果能帮助我了解如何我会gratefult我应该将表格连接到表格吗？举例来说，如果我按搜索按钮开始日期和结束日期被发送到控制器，控制器搜索数据，并将结果返回到正在使用AJAX

• 是我的做法正确的自动刷新表？
• 我的代码中是否有多余的部分？
• 我该如何将日期值传递给控制器​​？
• 我按下搜索按钮时应该如何传递数据表初始值？

在我收到以下错误的时刻：

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，其中第一个是一个数字。因此错误。