1. ホーム
  2. Web プログラミング
  3. AJAX関連

AJAXによるページ更新効果の指定部分の実現

2022-01-18 16:16:07

この例では、ページの指定した部分を更新する効果を得るためのAJAXの具体的なコードを、参考までに以下のように共有します。

この例では、bootstrap、jQuery、NProgressプログレスバープラグインを使用しており、あらかじめ関連ファイルの導入が必要です。

要件 左のオプションをクリックし、ページ全体を更新するのではなく、右のページのみを更新する。


ここでは3つのファイルが必要です

work.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>main</title>
</head>
<body>
      <main id="main">
        <h2> This is the work experience screen </h2>
        <hr>
      </main>
</body>
</html>

hobbit.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>main</title>
</head>
<body>
      <main id="main">
        <h2> This is the hobby screen </h2>
        <hr>
      </main>
</body>
</html>

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>main page</title>
  <link rel="stylesheet" href="bootstrap.min.css" >
  <link rel="stylesheet" href="... /nprogress.css" >
  <script src=". /nprogress.js"></script>
</head>
<body>
  <div class="container pt-4">
    <h1>Member Center</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" >Identity</a>
          <a class="list-group-item list-group-item-action" href="work.html" >work experience</a>
          <a class="list-group-item list-group-item-action" href="hobby.html" >Interests</a>
        </div>
      </aside>
      <main id="main" class="col-md-9">
        <h2> This is my personal information screen</h2>
        <hr>
      </main>
    </div>
  </div>
  <script src=". /jquery-3.4.1.js"></script>
  <script>
    $(function ($) {
  // entry function with parameter $, the reason is that there is a separate scope, by the way, to ensure that the page is loaded and executed

  // Global AJAX event handling
      $(document)
        .ajaxStart(function () {
          NProgress.start()
        })
        .ajaxStop(function () {
          NProgress.done()
        });
      $('.list-group-item').on('click', function () {
        var url = $(this).attr('href')
        // The #main after it refers to the id of the page being loaded 
        $('#main').load(url + ' #main > *')
        //the list group is a tag, disable it from jumping to the corresponding interface
        return false
      })
    })
  </script>
</body>
</html>

以上がこの記事の全内容です。皆様の学習のお役に立ち、BinaryDevelopをもっと応援していただけると幸いです。