局部刷新如何实现？看我简单实现局部刷新、分页

最新推荐文章于 2025-07-11 16:17:14 发布

原创最新推荐文章于 2025-07-11 16:17:14 发布 · 4.6k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #局部刷新 #分页 #java #编程

java 同时被 3 个专栏收录

24 篇文章

订阅专栏

异步

6 篇文章

订阅专栏

异步验证

4 篇文章

订阅专栏

本文介绍了一种在不完全刷新整个页面的情况下，仅更新部分数据的技术。通过Ajax异步加载，实现了局部数据的动态更新，特别适用于分页查询场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里小小推荐下我的个人博客

csdn：雷园的csdn博客

个人博客：雷园的个人博客

简书：雷园的简书

前言

1.感谢大家的关注和阅读，坚持干货不断～～～

2.今天我们来说一下如何通过ajax实现局部刷新。

应用场景

在Java中，如果我们一个页面中有很多的信息都是从后台传递过来的，但是我们有的地方需有有变动。比如我们在做菜品管理，上下翻页时，我们的分类以及其他的信息一般是不需要刷新，只需要更新我们的菜品信息即可，如果跳转后台会浪费很长时间，如果我们使用ajax实现异步刷新。就可以在html中通过js对页面进行简单的控制实现局部刷新的效果。我们今天就以分页查询为例进行讲解！！！

代码实现

1.后台的Java代码我就不再贴出来了，大家可以查看我的上一篇文章，Mybatis-Plus来学习一下！代码生成、分页插件？，可以通过mybatis-plus进行分页或者是使用mybatis的分页插件也可以，无论如何使用什么技术，相信实现分页对大家来说不是什么难事！！！

2.那我们直接来说一下视图层html的代码，我们简单的以饭店的商品管理为例：

	<body>
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
			<legend>菜品列表</legend>
		</fieldset>
		<a href="/goodsJump/toGoodsAdd">
			<button class="layui-btn layui-btn-normal layui-btn-small"><i class="layui-icon">&#xe61f;</i></button>
		</a>
		<button id="deleteAll" onclick="deleteAll()" class="layui-btn layui-btn-normal layui-btn-small"><i class="layui-icon">&#xe640;</i></button>
		<table id="table1" class="layui-table">
			<colgroup>
				<col width="100" />
				<col width="150" />
				<col/>
				<col/>
				<col/>
				<col/>
				<col width="250" />
			</colgroup>
			<thead>
				<tr>
					<th>
						<input type="checkbox" onclick="clickAll()" id="clickall" />
					</th>
					<th>编号</th>
					<th>分类名称</th>
					<th>菜品</th>
					<th>单价(分)</th>
					<th>折后价(分)</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="main">
				<tr>
					<!-- 需要局部刷新的地方 -->
				</tr>
			</tbody>
		</table>
		<div class="my-btn-box">
			<span class="fr">
                <!-- 这里是分页，传入的参数page在下面的js中有定义-->
	        <a href="javascript:" onclick="goodstable(1)">
	        	<button class="layui-btn layui-btn-primary layui-btn-small">首页</button>
	        </a>
	          <a href="javascript:" onclick="goodstable(page-1)">
	            	<button class="layui-btn layui-btn-primary layui-btn-small">上一页</button>
	          </a>
	      <span id="span"></span>
	        <a href="javascript:" onclick="goodstable(page+1)">
	        	<button class="layui-btn layui-btn-primary layui-btn-small">下一页</button>
	        </a>
	     	<a href="javascript:" onclick="goodstable(allPage)">
	      		<button class="layui-btn layui-btn-primary layui-btn-small">尾页</button> 
	    	</a>
  	   </span>
		</div>
	</body>

可见当我们点击上下页、首尾页时，只需要对id=“main”的tbody标签中的tr进行更新即可。

3.接下来我们说一下javascript代码，我们需要实现的功能主要就是依靠他来实现。

// 首先定义当前页page为1，总页数allPage为1
var page = 1;
var allPage = 1;

//商品表格显示
function goodstable(p) {
    // 判断传入页数大于等于1且小于等于总页数
    if (p >= 1 && p <= allPage) {
        // 将传入页赋值给当前页
        page = p;
        $.ajax({
            type: "post", // 以post方式提交
            url: "/goods/toList?page=" + p, // 请求链接并传递参数page
            dataType: "json", // 返回json数据
            error() {
            },
            success(data) {
                $("#main tr").remove(); // 删除ID=“main”标签的字标签tr下所有内容
                allPage = Math.ceil(data.total / data.size); // 给总页数赋值向上取整=总条目/每页大小
                document.getElementById("span").innerHTML = page + "/" + allPage;
                // 以下代码为循环布局                
                for (var i = 0; i < data.rows.length; i++) {
                    var trtd = "<td><input type='checkbox' name='click' value='" 
                        + data.rows[i].goodsId + "' /></td><td>" // 添加复选框
                        + data.rows[i].goodsId + "</td><td>"  // 添加标号
                        + data.rows[i].typeName + "</td><td>"  // 类型名
                        + data.rows[i].goodsName + "</td><td>"  // 商品名
                        + data.rows[i].goodsPrice + "</td><td>"  // 商品价格
                        + data.rows[i].goodsDiscount + "</td>"; // 商品折后价
                    // 将以上标签动态添加到tbody中进行展示
                    $("#table1 tbody").append("<tr>" + trtd + "</tr>"); 
                }
            }
        });
    }
}