在這里小小推薦下我的個(gè)人博客

前言

1.感謝大家的關(guān)注和閱讀，堅(jiān)持干貨不斷～～～

2.今天我們來(lái)說(shuō)一下如何通過(guò)ajax實(shí)現(xiàn)局部刷新。

應(yīng)用場(chǎng)景

在Java中，如果我們一個(gè)頁(yè)面中有很多的信息都是從后臺(tái)傳遞過(guò)來(lái)的，但是我們有的地方需有有變動(dòng)。比如我們?cè)谧霾似饭芾?#xff0c;上下翻頁(yè)時(shí)，我們的分類以及其他的信息一般是不需要刷新，只需要更新我們的菜品信息即可，如果跳轉(zhuǎn)后臺(tái)會(huì)浪費(fèi)很長(zhǎng)時(shí)間，如果我們使用ajax實(shí)現(xiàn)異步刷新。就可以在html中通過(guò)js對(duì)頁(yè)面進(jìn)行簡(jiǎn)單的控制實(shí)現(xiàn)局部刷新的效果。我們今天就以分頁(yè)查詢?yōu)槔M(jìn)行講解！！！

代碼實(shí)現(xiàn)

1.后臺(tái)的Java代碼我就不再貼出來(lái)了，大家可以查看我的上一篇文章，Mybatis-Plus來(lái)學(xué)習(xí)一下！代碼生成、分頁(yè)插件？，可以通過(guò)mybatis-plus進(jìn)行分頁(yè)或者是使用mybatis的分頁(yè)插件也可以，無(wú)論如何使用什么技術(shù)，相信實(shí)現(xiàn)分頁(yè)對(duì)大家來(lái)說(shuō)不是什么難事！！！

2.那我們直接來(lái)說(shuō)一下視圖層html的代碼，我們簡(jiǎn)單的以飯店的商品管理為例：

菜品列表





編號(hào)分類名稱菜品單價(jià)(分)折后價(jià)(分)操作

首頁(yè)

上一頁(yè)

下一頁(yè)

尾頁(yè)

可見(jiàn)當(dāng)我們點(diǎn)擊上下頁(yè)、首尾頁(yè)時(shí)，只需要對(duì)id=“main”的tbody標(biāo)簽中的tr進(jìn)行更新即可。

3.接下來(lái)我們說(shuō)一下javascript代碼，我們需要實(shí)現(xiàn)的功能主要就是依靠他來(lái)實(shí)現(xiàn)。

// 首先定義當(dāng)前頁(yè)page為1，總頁(yè)數(shù)allPage為1

var page = 1;

var allPage = 1;

//商品表格顯示

function goodstable(p) {

// 判斷傳入頁(yè)數(shù)大于等于1且小于等于總頁(yè)數(shù)

if (p >= 1 && p <= allPage) {

// 將傳入頁(yè)賦值給當(dāng)前頁(yè)

page = p;

$.ajax({

type: "post", // 以post方式提交

url: "/goods/toList?page=" + p, // 請(qǐng)求鏈接并傳遞參數(shù)page

dataType: "json", // 返回json數(shù)據(jù)

error() {

},

success(data) {

$("#main tr").remove(); // 刪除ID=“main”標(biāo)簽的字標(biāo)簽tr下所有內(nèi)容

allPage = Math.ceil(data.total / data.size); // 給總頁(yè)數(shù)賦值向上取整=總條目/每頁(yè)大小

document.getElementById("span").innerHTML = page + "/" + allPage;

// 以下代碼為循環(huán)布局

for (var i = 0; i < data.rows.length; i++) {

var trtd = "

" // 添加復(fù)選框

+ data.rows[i].goodsId + "

" // 添加標(biāo)號(hào)

+ data.rows[i].typeName + "

" // 類型名

+ data.rows[i].goodsName + "

" // 商品名

+ data.rows[i].goodsPrice + "

" // 商品價(jià)格

+ data.rows[i].goodsDiscount + "

"; // 商品折后價(jià)

// 將以上標(biāo)簽動(dòng)態(tài)添加到tbody中進(jìn)行展示

$("#table1 tbody").append("

" + trtd + "");

}

}

});

}

}

相信大家已經(jīng)看懂了，我的基本實(shí)現(xiàn)思路就是先將之前的數(shù)據(jù)從頁(yè)面中刪除，然后通過(guò)ajax向后臺(tái)請(qǐng)求數(shù)據(jù)，然后將數(shù)據(jù)再動(dòng)態(tài)的展示到頁(yè)面上，就可以實(shí)現(xiàn)簡(jiǎn)單的動(dòng)態(tài)刷新，然后以此可以實(shí)現(xiàn)很多功能。如上面的分頁(yè)查詢嗎、信息更新等。

結(jié)束語(yǔ)

1.我的方式可能并不是最好的方式，但是倒也不失為一種方法。經(jīng)過(guò)我的實(shí)驗(yàn)，還是蠻好用的。

2.感謝的大家的關(guān)注和閱讀，希望大家可以給我提出更多的問(wèn)題以及想法，為我提供素材和題目。

3.我會(huì)努力，保持更新。

4.干貨不斷，感謝！！！！

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。