在這里小小推薦下我的個人博客

前言

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.干貨不斷，感謝！！！！

總結

以上是生活随笔為你收集整理的java局部刷新表格数据,局部刷新如何实现？看我简单实现局部刷新、分页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。