頁面局部刷新三種方法

2021-7-28    前端達(dá)人

頁面局部刷新

1.使用ajax實(shí)現(xiàn)小部分的內(nèi)容局部刷新
$.ajax({
url:“http://localhost:8080/intoHomepage.do”,
type:“post”,
data:{name:“mydata”}，
success:function (result) {
if(result){ //對后端返回的數(shù)據(jù)result進(jìn)行處理
$(".testchange").html(“將對應(yīng)的class=testchange的標(biāo)簽內(nèi)容進(jìn)行修改。還可以通過一些父類和子類選擇函數(shù)進(jìn)行操作更新數(shù)據(jù)如：find（）、chidren（）、parent（）等”);
}
},
error:function () {
alert(“出現(xiàn)錯(cuò)誤！”);
}
}
);

  1. 如果要對大部分內(nèi)容進(jìn)行刷新建議使用iframe標(biāo)簽進(jìn)行整體刷新。
  2. 對于點(diǎn)擊不同的按鈕（或其他的標(biāo)簽）局部刷新可以使用" 隱藏方式"，比如事先準(zhǔn)備好幾種不同的內(nèi)容，
    < button id=“b1”>按鈕1< /button>
    < button id=“b2”>按鈕2< /button>
    < button id=“b3”>按鈕3< /button>
    < div >
    < di v class=“test01”>
    < p> this is test01 < /p>
    < /div>
    < di v class=“test02” style="display：none ">
    < p> this is test02 < /p>
    < /div>
    < di v class=“test03” style="display：none ">
    < p> this is test03 < /p>
    < /div>
    < /div>

點(diǎn)擊按鈕觸發(fā)事件（onclick()或其他事件）對需要刷新的部分內(nèi)容進(jìn)行css屬性display：none(/block)設(shè)置只顯示一個(gè)div的內(nèi)容




藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報(bào)下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

文章來源：csdn

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

分享本文至：

日歷

鏈接

個(gè)人資料

存檔