SpringMVC配合EL表达式以及AJAX实现局部刷新

最新推荐文章于 2024-07-11 00:15:48 发布

置顶天降爆米花

最新推荐文章于 2024-07-11 00:15:48 发布

阅读量6.2k

点赞数 8

分类专栏： JavaEE 文章标签：局部刷新 ajax异步刷新 spring局部刷新 springmvc页面刷新

本文链接：https://blog.csdn.net/dream20nn/article/details/51303359

版权

JavaEE 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

现在项目使用的是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){
    }
});