如何解決基于bootstrap頁(yè)面渲染的問(wèn)題

這篇文章主要介紹了如何解決基于bootstrap頁(yè)面渲染的問(wèn)題，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

這幾天正在做一個(gè)后臺(tái)管理的小項(xiàng)目，從網(wǎng)上找了個(gè)基于bootstrap的ui模板，參考了一般系統(tǒng)的做法，都是上面一個(gè)navbar，左側(cè)一個(gè)目錄樹(shù)，然后空出來(lái)的一大片地方放置內(nèi)容。然后各種把每個(gè)區(qū)域都提出去，弄成一個(gè)一個(gè)的小文件，然后include到一個(gè)大文件中。

當(dāng)做到內(nèi)容區(qū)域的時(shí)候就在考慮，內(nèi)容是放在iframe中進(jìn)行局部渲染，還是像網(wǎng)上有些框架那樣，每個(gè)頁(yè)面都include navbar，目錄樹(shù)？如果每個(gè)頁(yè)面都包含了同樣的目錄樹(shù)，那刷新頁(yè)面的時(shí)候就是整頁(yè)面刷新，這個(gè)不是我想要的；然后去網(wǎng)上查了一下，一些人說(shuō)bootstrap框架可以用iframe，但是強(qiáng)烈不建議使用，可能出現(xiàn)各種各樣的問(wèn)題。(專門試了一版iframe的，確實(shí)是與人家的模板樣式差很遠(yuǎn))

于是就各種實(shí)驗(yàn)，無(wú)意中看到一個(gè)介紹局部刷新div的方法，也就是用ajax去請(qǐng)求一個(gè)頁(yè)面

var menuClick = function (menuUrl) {
 $.get(menuUrl,function (data) {
  alert(data);
  $("#mainframe").html(data);
 });

};

這里的menuUrl可以是一個(gè)html頁(yè)面的路徑，也可以是一個(gè)***.do，然后跳轉(zhuǎn)到一個(gè)頁(yè)面，回調(diào)函數(shù)里面的data就是你請(qǐng)求的那個(gè)頁(yè)面，成功之后只需要獲取頁(yè)面上的一個(gè)div，然后將返回的html代碼拼接到那個(gè)div中即可。點(diǎn)擊目錄的節(jié)點(diǎn)時(shí)候只需要調(diào)用這個(gè)方法，然后將對(duì)應(yīng)的url傳入這個(gè)方法即可。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何解決基于bootstrap頁(yè)面渲染的問(wèn)題”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!