js局部刷新当前页面 简单实现局部刷新、分页
原创

js局部刷新当前页面 简单实现局部刷新、分页

好文

文章目录[隐藏]

试试语音读文章

热门答案:

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

代码实现

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

2.那我们直接来说一下视图层html的代码。我们简单的以饭店的商品管理为例:局部刷新如何实现?看我简单实现局部刷新、分页局部刷新如何实现?看我简单实现局部刷新、分页

html-1局部刷新如何实现?看我简单实现局部刷新、分页局部刷新如何实现?看我简单实现局部刷新、分页

html-2

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

3.接下来我们说一下javascript代码。我们需要实现的功能主要就是依靠他来实现。局部刷新如何实现?看我简单实现局部刷新、分页局部刷新如何实现?看我简单实现局部刷新、分页

javascript

相信大家已经看懂了。我的基本实现思路就是先将之前的数据从页面中删除。然后通过ajax向后台请求数据。然后将数据再动态的展示到页面上。就可以实现简单的动态刷新。然后以此可以实现很多功能。如上面的分页查询吗、信息更新等。

大家还在搜:

  • 前端分页显示
  • 后端实现分页
  • 前端实现数据分页
  • js局部刷新当前页面
  • 更多网络推广文章推荐

    以上就是由互联网推广工程师 网创网 整理编辑的,如果觉得有帮助欢迎收藏转发~

    相关推荐

    发表评论

    您的电子邮箱地址不会被公开。

    评论(2)

    • 听闻你 永久VIP 2022年10月12日 22:58:54

      分页,局部,看我,简单,如何实现,代码,后台,页面,信息,为例

    • 长空夕醉 永久VIP 2022年10月12日 22:58:54

      js局部刷新当前页面 简单实现局部刷新、分页,现在知道了,不过这这篇解答确实也是太好了

    • 小新卖蜡笔 永久VIP 2022年10月12日 22:58:54

      在Java中。如果我们一个页面中有很多的信息都是从后台传递过来的。但是我们有的地方需有有变动。比如我们在做菜品