提交表单后,如何在标签中呈现 Spring 视图 (JSP <div> )?



我的应用程序使用Spring MVC。我有一个从daterangepicker接收开始日期和结束日期的表格。我想显示另一个视图,在提交表单后,在表单下面的"dataDiv"中查询一个表,但不重新加载页面。到目前为止,我所做的是,结果是当我提交一个表单时,它重定向到新页面(request-data.jsp),但表工作正常。

这是我的代码…

<

JSP/strong>

<form action="view-data" method="get" id="ajaxTest">
  <div id="reportrange" class="form-control">
    <i class="fa fa-calendar"></i> 
    <span></span>
    <b class="caret"></b>
  </div>
  <input type="hidden" id="startDate" name="startDate" /> 
  <input type="hidden" id="endDate" name="endDate" /> 
  <input type="submit" value="VIEW" id="ajaxBtn" />
</form>
<div id="dataDiv"></div>

我使用Ajax加载另一个视图。

$('#ajaxTest').submit(function(event) {
  var startDate = $('#reportrange').data('daterangepicker').startDate;
  var endDate = $('#reportrange').data('daterangepicker').endDate;
  document.getElementById("startDate").value = startDate;
  document.getElementById("endDate").value = endDate;
  $.ajax({
    url : "../request-data",
    type : 'GET',
    data : data,
    success : function(response) {
      alert("success");	
      $('#dataDiv').html( response );
    },
    error : function() {
      alert("error");
    }
  });
return false;
});

<

春控制器/strong>

@RequestMapping(value = "/request-data", method = RequestMethod.GET)
public ModelAndView requestRanking(HttpServletRequest httpRequest, @RequestParam("startDate") Date stDate, @RequestParam("endDate") Date edDate, RedirectAttributes rd) {
  ModelAndView mav = new ModelAndView();
      /*
      *Query for book created between stDate and edDate
      */
  rd.addFlashAttribute("bookForms", bookForms);
  mav.setViewName("request-data");
  return mav;
}

request-data.jsp view

$(document).ready(function() {
    $('.footable').footable();
  });
<div>
  <c:if test="${!empty bookForms}">
    <input type="text" class="form-control input-sm m-b-xs" id="filter" placeholder="Search in table" />
    <table id="page-size-example" class="footable table table-stripped" data-page-size="" data-filter=#filter data-sorting="true">
      <thead>
        <tr>
          <th data-type="numeric" data-sort-initial="true">#</th>
          <th>BOOKNAME</th>
          <th>PRICE</th>
          <th>CREATED_DATE</th>
        </tr>
      </thead>
      <tbody>
        <c:forEach items="${bookForms}" var="bookForm" varStatus="status">
          <tr>
            <td>${status.count}</td>
            <td>${bookForm.name}</td>
            <td>${bookForm.price}</td>
            <td>${bookForm.createdDate}</td>
          </tr>
        </c:forEach>
      </tbody>
    </table>
  </c:if>
</div>

还有其他方法吗?请帮帮我。由于

我找到了一个解决方案,您如何使用spring4 @RestController返回jsp页面?您应该在方法中添加@ResponseBody注释,如果每个方法都使用ajax,则应该在类中添加@RestController注释。这些注解使你的控制器/方法与ajax异步工作。

的一些代码
@RequestMapping(value = "/request-data", method = RequestMethod.GET)
@ResponseBody
public ModelAndView requestRanking(HttpServletRequest httpRequest, @RequestParam("startDate") Date stDate, @RequestParam("endDate") Date edDate, RedirectAttributes rd) {
   ModelAndView mav = new ModelAndView();
   mav.setViewName("request-data");
   //your actions
   return mav;
}

最新更新