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をもっと応援していただけると幸いです。
関連
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン