亚洲精品久久久中文字幕-亚洲精品久久片久久-亚洲精品久久青草-亚洲精品久久婷婷爱久久婷婷-亚洲精品久久午夜香蕉

您的位置:首頁(yè)技術(shù)文章
文章詳情頁(yè)

history保存列表頁(yè)ajax請(qǐng)求的狀態(tài)使用示例詳解

瀏覽:187日期:2022-06-12 08:16:33
目錄
  • 問(wèn)題
    • 優(yōu)化前代碼
  • history
    • history.pushState()
    • window.onpopstate
  • 問(wèn)題2

    問(wèn)題

    最近碰到兩個(gè)問(wèn)題:

    • 從首頁(yè)進(jìn)入列表頁(yè)之后,點(diǎn)擊下一頁(yè)的時(shí)候,使用ajax請(qǐng)求更新數(shù)據(jù), 然后點(diǎn)擊瀏覽器“后退”按鈕就直接返回到首頁(yè),實(shí)際這里想要的效果是返回列表頁(yè)上一頁(yè)。
    • 在列表頁(yè)分頁(yè)為2的頁(yè)面進(jìn)入詳情頁(yè),然后點(diǎn)擊“后退”按鈕,返回的事列表頁(yè)分頁(yè)為1的頁(yè)面。沒(méi)法記住之前分頁(yè)狀態(tài)。

    優(yōu)化前代碼

    代碼如下,在頁(yè)數(shù)變化的時(shí)候,去異步請(qǐng)求數(shù)據(jù),渲染頁(yè)面。

    const currentChange = (currentPage) => {
        ajax(`請(qǐng)求地址/${currentPage}`)
        .then(renderPage)
    }
    

    history

    經(jīng)過(guò)幾番搜索,發(fā)現(xiàn)可以用History 接口來(lái)實(shí)現(xiàn)我們想要功能。

    history.pushState()

    按指定的名稱和URL(如果提供該參數(shù))將數(shù)據(jù)push進(jìn)會(huì)話歷史棧,數(shù)據(jù)被DOM進(jìn)行不透明處理;你可以指定任何可以被序列化的javascript對(duì)象。具體描述可以參考文檔

    通過(guò)history.pushState(state, title, url)可以修改會(huì)話歷史棧,把我們需要保存的數(shù)據(jù)存到state中,這里我們存入一個(gè)對(duì)象,屬性為當(dāng)前頁(yè)數(shù);title一般沒(méi)什么用,這里傳入null;url會(huì)修改當(dāng)前歷史紀(jì)錄的地址,瀏覽器在調(diào)用pushState()方法后不會(huì)去加載這個(gè)URL

    假設(shè)當(dāng)前currentPage為1,當(dāng)前url為www.example.com/search/index

    ...
    const pushState = () => {
        const url = `/search/index/${currentPage}`
        history.push({
    page: currentPage
        }, null, url)
    }
    const currentChange = (currentPage) => {
        ajax(`請(qǐng)求地址/${currentPage}`)
        .then(res =>{
    pushState(currentPage)
    renderPage()
        })
    }
    ...
    

    現(xiàn)在代碼執(zhí)行順序是:頁(yè)數(shù)改變 => ajax請(qǐng)求 => pushState => renderPage()

    在pushState之后當(dāng)前url變成www.example.com/search/index/1

    window.onpopstate

    現(xiàn)在我們通過(guò)history.pushState()方法把狀態(tài)存入歷史會(huì)話中了,接下來(lái)就要監(jiān)聽window.onpopstate事件

    參考mdn文檔window.onpopstate

    每當(dāng)處于激活狀態(tài)的歷史記錄條目發(fā)生變化時(shí),popstate事件就會(huì)在對(duì)應(yīng)window對(duì)象上觸發(fā).

    調(diào)用history.pushState()或者h(yuǎn)istory.replaceState()不會(huì)觸發(fā)popstate事件. popstate事件只會(huì)在瀏覽器某些行為下觸發(fā), 比如點(diǎn)擊后退、前進(jìn)按鈕(或者在JavaScript中調(diào)用history.back()、history.forward()、history.go()方法).

    接下來(lái)監(jiān)聽這個(gè)事件

    window.addEventListener("popstate", (event) => {
    	if(event.state !== null){
    	    page = event.state.page
    	    changeCurrentPage(page) // 修改當(dāng)前頁(yè)數(shù)
    	}
    })
    

    當(dāng)popstate觸發(fā)時(shí),會(huì)修改當(dāng)前頁(yè)數(shù),然后觸發(fā)之前定義的currentChange方法,更新數(shù)據(jù),渲染頁(yè)面。

    問(wèn)題2

    到此為止,問(wèn)題1就解決了。

    接下來(lái)要解決問(wèn)題二:從詳情頁(yè)返回列表頁(yè),記住之前的狀態(tài)
    這里我用url來(lái)記錄狀態(tài),之前pushState推入的url就派上用場(chǎng)了。 只要把進(jìn)入頁(yè)面首次請(qǐng)求的地址改成當(dāng)前url就可以了

    假設(shè)之前push的url為www.example.com/search/index/5,從詳情頁(yè)返回之后url還會(huì)顯示www.example.com/search/index/5

    mounted () {
        ajax(location.href)
    }
    

    這樣就完成了。 當(dāng)然如果你的狀態(tài)比較復(fù)雜,可以把數(shù)據(jù)存入本地Storage,添加一些判斷即可

    以上就是history保存列表頁(yè)ajax請(qǐng)求的狀態(tài)使用示例詳解的詳細(xì)內(nèi)容,更多關(guān)于history保存列表頁(yè)ajax請(qǐng)求狀態(tài)的資料請(qǐng)關(guān)注其它相關(guān)文章!

    標(biāo)簽: Ajax
    主站蜘蛛池模板: 亚洲精品欧美 | 97青草最新免费精品视频 | 护士xxxx做爰| 成人午夜国产福到在线 | 国产精品jizz观看 | 国产在线观看人成激情视频 | 国语高清精品一区二区三区 | 中文国产成人精品久久无广告 | 午夜看片未满十八勿进 | 日韩第八页| 色视频在线观看在线播放 | 色老头oldmanvideos| 91国自产精品中文字幕亚洲 | 亚洲第一a亚洲 | 丁香六月欧美 | 夜夜爽日日澡人人 | 成人小视频在线 | 91香蕉小视频 | 国产91视频免费 | 国产曰批的免费视频 | 成人看的一级毛片 | 国产1区2区3区在线观看 | 国产日韩欧美在线视频免费观看 | 国产一区二区三区视频 | 亚洲精品一区二三区在线观看 | 欧美性色xo影院在线观看 | 日本精品视频一区二区三区 | 精品一区二区三区在线观看视频 | 国产国语一级毛片全部 | 999成人精品视频在线 | 欧美日韩视频精品一区二区 | 亚洲精品高清在线 | 亚洲淫| 色久综合在线 | 国产香蕉精品视频 | 亚洲欧美一区二区三区麻豆 | 99精选视频 | 看片在线观看 | 68久久久久欧美精品观看 | 久久中国 | 老外黑人欧美一级毛片 |