現在專案使用的是SpringMVC,前臺通過EL表示式取值展現，現在前臺頁面點選查詢按鈕時需要非同步重新整理列表內容。傳統方式就是拼接HTML返回，無論是後臺返回和前臺拼接方式都不是很好，標籤如果過多排錯，修改都很麻煩。可以採用如下的方式進行動態重新整理：

如下是需要展現以及後臺SpringMVC返回的JSP頁面：

<table class="table table-condensed piao_table border">
  <thead>
  <tr>
    <th><input type="checkbox" id="checkedAll" onclick="checkedAll();"> 全選</th>
    <th></th>
    <th>姓名</th>
    <th>電話</th>
    <th>參與次數</th>
    <th>消費金額</th>
  </tr>
  </thead>
  <tbody id="tbody">
  <c:forEach var="t" items="${userList}">
    <tr>
      <td class="cb-align"><input type="checkbox" value="${t.aliasID}" onchange="itemChecked(this);"></td>
      <td onclick="infoUserShow('${ctx}/staffID/user/${t.openid}.api');" ><img src="${t.headimgurl}" class="img-circle"/></td>
      <td class="info-user-pointer"  onclick="infoUserShow('${ctx}/staffID/user/${t.openid}.api');" >${t.name}</td>
      <td>${t.phone}</td>
      <td>${t.applyCount}</td>
      <td>￥0</td>
    </tr>
  </c:forEach>
  </tbody>
</table>
<nav class="pull-left pl">
  <ul class="pagination pagination-sm" >
    <li><a style="border:0;color:#000;">共有${page.totalCount}人,每頁顯示${page.pageSize}人</a></li>
    <li><a href="javascript:void(0);" onclick="changePageSize(10,1,'${ctx}/staffID/page/users.api');"  class="currentPage">10</a></li>
    <li><a href="javascript:void(0);" onclick="changePageSize(25,1,'${ctx}/staffID/page/users.api');">25</a></li>
    <li><a href="javascript:void(0);" onclick="changePageSize(50,1,'${ctx}/staffID/page/users.api');">50</a></li>
    <li><a href="javascript:void(0);" onclick="changePageSize(100,1,'${ctx}/staffID/page/users.api');">100</a></li>
    <li style="border:0;"><a ></a></li>
  </ul>
</nav>
<nav class="pull-right" >
  <div class="spages">
    <label><a href="javascript:void(0);" onclick="upPage('${page.pageNo}','${ctx}/staffID/page/users.api')" aria-label="Previous" ><span aria-hidden="true">上一頁</span></a></label>
    <label>${page.pageNo}/${page.totalPage}</label>
    <label><a href="javascript:void(0);" onclick="nextPage('${page.pageNo}','${page.totalPage}','${ctx}/staffID/page/users.api')" aria-label="Next"><span aria-hidden="true">下一頁</span></a></label>
    <input id="jumpNo" type="number" style="width:60px;height:27px;border:1px solid #ddd;outline:none;border-radius:3px;" onkeyup="value=value.replace(/[^\d]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
    <button  onclick="jumpPage('${page.totalPage}','${ctx}/staffID/page/users.api')" type="button" class="btn btn-default btn-xs" style="width:auto;">跳轉</button>
  </div>
</nav>
 

想要實現AJAX請求後動態重新整理列表頁面，可以將TABLE放到一個新的JSP的body中，然後在原來的JSP的TABLE上方套一層DIV，當傳送AJAX請求到後臺，後臺組裝好資料後返回新的JSP,在AJAX中可以取得DIV然後HTML即可

以下為JS傳送AJAX請求：

$.ajax({
    type: 'GET',
    url:  url,
    dataType: "html",
    cache:false,
    success: function(data){
        $('#flushDIV').html(data);
    },
    error : function(data){
    }
});