现在项目使用的是SpringMVC,前台通过EL表达式取值展现,现在前台页面点击查询按钮时需要异步刷新列表内容。传统方式就是拼接HTML返回,无论是后台返回和前台拼接方式都不是很好,标签如果过多排错,修改都很麻烦。可以采用如下的方式进行动态刷新:
如下是需要展现以及后台SpringMVC返回的JSP页面:
<table class="table table-condensed piao_table border">
<thead>
<tr>
<th><input type="checkbox" id="checkedAll" οnclick="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}" οnchange="itemChecked(this);"></td>
<td οnclick="infoUserShow('${ctx}/staffID/user/${t.openid}.api');" ><img src="${t.headimgurl}" class="img-circle"/></td>
<td class="info-user-pointer" οnclick="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);" οnclick="changePageSize(10,1,'${ctx}/staffID/page/users.api');" class="currentPage">10</a></li>
<li><a href="javascript:void(0);" οnclick="changePageSize(25,1,'${ctx}/staffID/page/users.api');">25</a></li>
<li><a href="javascript:void(0);" οnclick="changePageSize(50,1,'${ctx}/staffID/page/users.api');">50</a></li>
<li><a href="javascript:void(0);" οnclick="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);" οnclick="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);" οnclick="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;" οnkeyup="value=value.replace(/[^\d]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
<button οnclick="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){
}
});