在这里小小推荐下我的个人博客
前言
1.感谢大家的关注和阅读，坚持干货不断～～～
2.今天我们来说一下如何通过ajax实现局部刷新。
应用场景
在Java中，如果我们一个页面中有很多的信息都是从后台传递过来的，但是我们有的地方需有有变动。比如我们在做菜品管理，上下翻页时，我们的分类以及其他的信息一般是不需要刷新，只需要更新我们的菜品信息即可，如果跳转后台会浪费很长时间，如果我们使用ajax实现异步刷新。就可以在html中通过js对页面进行简单的控制实现局部刷新的效果。我们今天就以分页查询为例进行讲解！！！
代码实现
1.后台的Java代码我就不再贴出来了，大家可以查看我的上一篇文章，Mybatis-Plus来学习一下！代码生成、分页插件？，可以通过mybatis-plus进行分页或者是使用mybatis的分页插件也可以，无论如何使用什么技术，相信实现分页对大家来说不是什么难事！！！
2.那我们直接来说一下视图层html的代码，我们简单的以饭店的商品管理为例：
菜品列表
编号分类名称菜品单价(分)折后价(分)操作
首页
上一页
下一页
尾页
可见当我们点击上下页、首尾页时，只需要对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 = "
" // 添加复选框
+ data.rows[i].goodsId + "
" // 添加标号
+ data.rows[i].typeName + "
" // 类型名
+ data.rows[i].goodsName + "
" // 商品名
+ data.rows[i].goodsPrice + "
" // 商品价格
+ data.rows[i].goodsDiscount + "
"; // 商品折后价
// 将以上标签动态添加到tbody中进行展示
$("#table1 tbody").append("
" + trtd + "");
}
}
});
}
}
相信大家已经看懂了，我的基本实现思路就是先将之前的数据从页面中删除，然后通过ajax向后台请求数据，然后将数据再动态的展示到页面上，就可以实现简单的动态刷新，然后以此可以实现很多功能。如上面的分页查询吗、信息更新等。
结束语
1.我的方式可能并不是最好的方式，但是倒也不失为一种方法。经过我的实验，还是蛮好用的。
2.感谢的大家的关注和阅读，希望大家可以给我提出更多的问题以及想法，为我提供素材和题目。
3.我会努力，保持更新。
4.干货不断，感谢！！！！
