鍍金池/ 問答/HTML5  PHP  HTML/ 怎樣具體實現(xiàn)無刷新跳轉(zhuǎn)頁面？

怎樣具體實現(xiàn)無刷新跳轉(zhuǎn)頁面？

我現(xiàn)在在用Laravel開發(fā)一個網(wǎng)站后臺，頁面主要由三部分組成：頂部導(dǎo)航欄id="headnav"、側(cè)邊導(dǎo)航欄id="headnav"和主要內(nèi)容id="content"。
我想要實現(xiàn)那種在左側(cè)導(dǎo)航欄點擊某個鏈接之后，整個頁面不用刷新來加載，只是content區(qū)域和地址欄地址、標(biāo)題欄的內(nèi)容變化，請問如何實現(xiàn)？
我在網(wǎng)上查找了很多介紹ajax實現(xiàn)的方法，但是都有點太簡略，我的JavaScript基礎(chǔ)不好，不是很能看懂，想請教一下大家，謝謝。

回答
編輯回答
尐潴豬

你的想法以前也有人想過的, 然后 pjax 就出來了

2018年3月8日 01:13
編輯回答
綰青絲

涉及到地址修改，不推薦你不適用前端路由(框架)的情況下這么做。

  1. 地址修改可以用html5標(biāo)準(zhǔn)的

    history.pushState('state//一個狀態(tài)對象', '測試//標(biāo)題', 'test//資源路徑')
// 比如在https://www.baidu.com/下執(zhí)行后地址就變成
//https://www.baidu.com/test/

    但是你需要自己處理用戶點擊瀏覽器返回的業(yè)務(wù)邏輯。

  2. 標(biāo)題修改就是document.title = '你的值'

  3. content可以用這么幾種方式

    • display切換
    • iframe
    • js動態(tài)創(chuàng)建和刪除所有的content內(nèi)頁面結(jié)構(gòu)

所以頁面結(jié)構(gòu)上也用不著ajax，ajax用來取局部數(shù)據(jù)更合適

2018年4月25日 12:10