AJAX實現指定部分頁面重新整理效果

阿新 • • 發佈：2021-10-15

本文例項為大家分享了AJAX實現指定部分頁面重新整理效果的具體程式碼，供大家參考，具體內容如下

這個例子使用了bootstrap，和NProgress進度條外掛，事先需引入相關檔案。

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

AJAX實現指定部分頁面重新整理效果

這裡需要三個檔案

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="zhttp://www.cppcns.comh-CN">
<head>
  <meta charset="UTF-8">
  <title>主頁面</title>
  <link rel="stylesheet" href="bootstrap.min." rel="external nofollow" >
  <link rel="stylesheet" href="../nprogress.css" rel="external nofollow" >
  <script src="../nprogress."></script>
</head>
<body>
  <div class="container pt-4">
    <h1>會員中心</h1>
    <hr>
    <div class="row">
      <aside class="col-md-3">
        <div class="list-group">
          <a class="list-group-item list-group-item-action" href="index.html" >個人資訊</a>
          <a class="list-group-item list-group-item-action" href="work.html" >工作經驗</a>
          <a class="list-group-item list-group-item-action" href="hobbit.html" >興趣愛好</a>
        </diGwImH 
v>
      </aside>
      <main id="main" class="col-md-9">
        <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實現簡單登入頁面

本文例項為大家分享了ajax實現簡單登入頁面的具體程式碼，供大家參考，具體內容如下

Jquery實現div區域性頁面重新整理中js渲染失效問題解決

layui.jsp： <link rel=\"stylesheet\" href=\"<%=basePath%>/layui/css/layui.css\"> <script type=\"text/javascript\" src=\"<%=basePath%>/layui/layui.js\"></script>