文章詳情頁
AJAX實現指定部分頁面刷新效果
瀏覽：38日期：2022-06-12 11:10:53
本文實例為大家分享了AJAX實現指定部分頁面刷新效果的具體代碼，供大家參考，具體內容如下
這個例子使用了bootstrap，jQuery和NProgress進度條插件，事先需引入相關文件。
需求：點擊左邊的選項，不需要整個頁面刷新，只進行右邊頁面的刷新。
這里需要三個文件
work.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>
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" >工作經驗</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 ($) { // 入口函數帶參數$,原因是有一個獨立的作用域，順便確保頁面加載完成執行 //全局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 標簽，禁止它跳轉到相應界面return false }) }) </script></body></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。
標簽：
Ajax
上一條：ajax實現城市三級聯動下一條：AJAX實現省市縣三級聯動效果
排行榜
網公網安備