文章詳情頁

AJAX實現(xiàn)指定部分頁面刷新效果

瀏覽：32日期：2022-06-12 11:10:53

本文實例為大家分享了AJAX實現(xiàn)指定部分頁面刷新效果的具體代碼，供大家參考，具體內(nèi)容如下

這個例子使用了bootstrap，jQuery和NProgress進度條插件，事先需引入相關(guān)文件。

需求：點擊左邊的選項，不需要整個頁面刷新，只進行右邊頁面的刷新。

這里需要三個文件

work.html

<!DOCTYPE html><html lang="zh-CN"><head>  <meta charset="UTF-8">  <title>主頁面</title></head><body>      <main id="main"><h2>這是工作經(jīng)驗界面</h2><hr>      </main></body></html>

hobbit.html

<!DOCTYPE html><html lang="zh-CN"><head>  <meta charset="UTF-8">  <title>主頁面</title></head><body>      <main id="main"><h2>這是興趣愛好界面</h2><hr>      </main></body></html>

index.html

<!DOCTYPE html><html lang="zh-CN"><head>  <meta charset="UTF-8">  <title>主頁面</title>  <link rel="stylesheet" href="bootstrap.min.css" >  <link rel="stylesheet" href="../nprogress.css" >  <script src="../nprogress.js"></script></head><body>  <div>    <h1>會員中心</h1>    <hr>    <div>      <aside><div>  <a href="index.html" >個人信息</a>  <a href="work.html" >工作經(jīng)驗</a>  <a href="hobbit.html" >興趣愛好</a></div>      </aside>      <main id="main"><h2>這是我的個人信息界面</h2><hr>      </main>    </div>  </div>  <script src="../jquery-3.4.1.js"></script>  <script>    $(function ($) {  // 入口函數(shù)帶參數(shù)$,原因是有一個獨立的作用域，順便確保頁面加載完成執(zhí)行  //全局AJAX事件處理      $(document).ajaxStart(function () {  NProgress.start()}).ajaxStop(function () {  NProgress.done()});      $(".list-group-item").on("click", function () {var url = $(this).attr("href")//后面的 #main 指的是載入頁面的 id $("#main").load(url + " #main > *")//列表組中是 a 標簽，禁止它跳轉(zhuǎn)到相應界面return false      })    })  </script></body></html>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持。

Ajax

上一條：ajax實現(xiàn)城市三級聯(lián)動下一條：AJAX實現(xiàn)省市縣三級聯(lián)動效果

排行榜

					
					教你如何正確了解java三大特性!!!!
python openpyxl 帶格式復制表格的實現(xiàn)
Python 下載Bing壁紙的示例
Python用K-means聚類算法進行客戶分群的實現(xiàn)
python實現(xiàn)圖片九宮格分割的示例
python 實現(xiàn)aes256加密
python 浮點數(shù)四舍五入需要注意的地方
Python 如何將integer轉(zhuǎn)化為羅馬數(shù)(3999以內(nèi))
Python獲取瀏覽器窗口句柄過程解析
Python使用shutil模塊實現(xiàn)文件拷貝
Python 如何用一行代碼實現(xiàn)for循環(huán)初始化數(shù)組
				