クリックすると別のHTMLコンテンツをjQuery Ajaxで読み込み表示させる

同じページ内で、メニューをクリックすると別HTMLを読み込んで表示させる必要がありました。

ページ全体を切り替えるのではなく、切り替えたい部分だけコンテンツを読み込んで切り替えたいというときに。

サンプルを作りましたので、ご覧ください。

→ 「クリックすると別のHTMLコンテンツをAjaxで読み込み表示させる」サンプル

別ファイルで作ったHTMLを読み込むので、スムーズなページ遷移が可能になります。

【作り方】

jQueryプラグインを利用せずに、コードを書いていきます。
よくわからない人もコピペしながら使うと、なにをしているのかわかってくると思います。

１. jsファイルを作成して、以下のように記述します。（今回はfix.jsという名前で作成しました。）
別HTMLを読み込む時にぐるぐる回るローディングも表示させるようにしてあります。

$(function(){
//ページを表示させる場所の設定
var $content = $('.displayArea');
//ボタンをクリックした時の処理
$(document).on('click', '.gnavi a', function(event) {
event.preventDefault();
//.gnavi aのhrefにあるリンク先を保存
var link = $(this).attr("href");
//リンク先が今と同じであれば遷移させない
if(link == lastpage){
return false;
}else{
$content.fadeOut(600, function() {
getPage(link);
});
//今のリンク先を保存
lastpage = link;
}
// 遷移可能であればローディング表示させる
$("#loader").show();

});
//初期表示
getPage("test1.html");
var lastpage = "test1.html";

//ページを取得してくる
function getPage(elm){
$.ajax({
type: 'GET',
url: elm,
dataType: 'html',
success: function(data){
$("#loader").fadeOut();
$content.html(data).fadeIn(600);
},
error:function() {
alert('問題が発生しました。');
}
});
}
});

$(function(){

//ページを表示させる場所の設定

var $content = $('.displayArea');

//ボタンをクリックした時の処理

$(document).on('click', '.gnavi a', function(event) {

event.preventDefault();

//.gnavi aのhrefにあるリンク先を保存

var link = $(this).attr("href");

//リンク先が今と同じであれば遷移させない

if(link == lastpage){

return false;

}else{

$content.fadeOut(600, function() {

getPage(link);

});

//今のリンク先を保存

lastpage = link;

}

// 遷移可能であればローディング表示させる

$("#loader").show();

});

//初期表示

getPage("test1.html");

var lastpage = "test1.html";

//ページを取得してくる

function getPage(elm){

$.ajax({

type: 'GET',

url: elm,

dataType: 'html',

success: function(data){

$("#loader").fadeOut();

$content.html(data).fadeIn(600);

error:function() {

alert('問題が発生しました。');

}

});

}

});

最初にページを開いたときに表示させたいコンテンツは、23行目の
getPage(“test1.html”);
var lastpage = “test1.html”;
のtest1.htmlを変更します。

url	読み込むファイルを指定。
dataType	受け取るデータの種類。「html」「xml」「json」など。
success	データ取得成功後に実行する処理。
error	エラーが発生したときに実行する処理。

2.メニューの部分とコンテンツ表示部分は以下のようになります。

<div class="contents">
<div class="gnavi">
<ul>
 	<li><a href="test1.html">1のページ</a></li>
 	<li><a href="test2.html">2のページ</a></li>
 	<li><a href="test3.html">3のページ</a></li>
 	<li><a href="test4.html">4のページ</a></li>
</ul>
</div>
<div id="loader-bg">
<div id="loader"><img src="loader.gif" width="16" height="16"></div>
</div>
<div class="displayArea"></div>
</div>

<ul>

</ul>

</div>

</div>

</div>

3.読み込むHTMLファイルを作ります。
例えば、サンプルで利用しているtest1.htmlファイルは以下のようになっています。

<h2>test1.htmlの内容です</h2>
<div class="box">
<ul>
 	<li>ああああああ</li>
 	<li>いいいいいい</li>
</ul>
</div>

<h2>test1.htmlの内容です</h2>

<ul>

<li>ああああああ</li>

<li>いいいいいい</li>

</ul>

</div>

＜/body＞の直前または＜/head＞にjQueryや書いたスクリプトを読み込むを記述します。パスに注意。

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/fix.js"></script>

1 2	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="js/fix.js"></script>

読み込ませたいHTMLファイルを作成する必要がありますが、コンテンツ更新時などにはファイル管理も楽になりそうです。

ソースがすっきりするのでいいですね。

最後にサンプルのソースを書いておきますので、どうぞご参考まで。

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
     	<link rel="stylesheet" href="css/base.css">
    <!-- SCRIPTS -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/fix.js"></script>
<!--[if lt IE 9]>
<script src="//cdn.jsdelivr.net/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
     	<link rel="shortcut icon" href="">
<div id="wrapper">
<hgroup>
<h1>DEMO</h1>
<h2>別HTMLページをajaxで読み込み表示させる</h2>
</hgroup>
<div class="contents">
<div class="gnavi">
<ul>
 	<li><a href="test1.html">1のページ</a></li>
 	<li><a href="test2.html">2のページ</a></li>
 	<li><a href="test3.html">3のページ</a></li>
 	<li><a href="test4.html">4のページ</a></li>
</ul>
</div>
<div id="loader-bg">
<div id="loader"><img src="loader.gif" width="16" height="16"></div>
</div>
<div class="displayArea"></div>
</div>
</div>

<!--[if lt IE 9]>

<![endif]-->

<h2>別HTMLページをajaxで読み込み表示させる</h2>

</hgroup>

<ul>

</ul>

</div>

</div>

</div>

あわせてお読みください

クリックすると横からメニューが現れるjQueryプラグイン『Sidr』

Sidr スマホのサイトでボタンやリンクをタップすると隠れていたメニューが横から現れるというのがよく使われます。 FacebookのページやYouTubeでも…

クリックすると隠れたページがスライドされて現れるjQueryプラグイン「PageSlide」

ボタンやリンクをクリックすると、隠れていたページが横から現れるページを実装できるjQueryプラグインです。サンプルページを作ってみましたのでご覧下さい。 →…

モーダルをフルスクリーンで表示させるjQueryプラグイン「animatedModal.js」

モーダルウィンドウというと、クリックするとポップアップで小窓が開いてそこにコンテンツが表示されるというイメージがありますが、このjQueryプラグイン「anim…

ぱんにゃっとTutorial

jQueryやWordPress、Webデザインに役立つ情報など

ちょっと楽しいおすすめのサンプル

月額126円(税抜)から！WordPressも使えるクラウド型高速レンタルサーバー

カテゴリー

タグ

クリックすると別のHTMLコンテンツをjQuery Ajaxで読み込み表示させる

→ 「クリックすると別のHTMLコンテンツをAjaxで読み込み表示させる」サンプル

【作り方】

あわせてお読みください

コメントを残すコメントをキャンセル

ぱんにゃっとTutorial

jQueryやWordPress、Webデザインに役立つ情報など

ちょっと楽しいおすすめのサンプル

人気記事ランキング

月額126円(税抜)から！WordPressも使えるクラウド型高速レンタルサーバー

カテゴリー

タグ

クリックすると別のHTMLコンテンツをjQuery Ajaxで読み込み表示させる

→ 「クリックすると別のHTMLコンテンツをAjaxで読み込み表示させる」サンプル

【作り方】

あわせてお読みください

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル