jQuery Ajax – HTMLのボックスエリアに別ページの内容をAjax(非同期通信)で表示する。
シンプルなスクリプトですが（所謂基本）。
index.html の.newsarea に news.html を表示。
.fadeIn() で、読み込みしてる感じに演出。
jQueryのダウンロードは → https://jquery.com/
詳しくは、jQuery日本語リファレンス：jQuery.ajax(options)
script
<script type="text/javascript">
$.ajax({
url: 'news.html',//読み込むhtmlファイル
dataType: 'html',//データの種類
timeout:3000,
async: true,//非同期通信有効
success: function(html) {
$('.newsarea').html(html).fadeIn(5000);//データ取得成功した時、5秒かけてクラスnewsareaにnews.html表示。
},
error: function() {
alert('読み込みに失敗しました。しばらくたってからアクセスし直してみてください。');
}
});
</script>
news.html
<!---------------------- ↓↓ 新着情報入力エリア ↓↓ ------------------------> <p>2016.04.01 <a href="index.html">ホームページを公開いたしました。</a></p> <p>2016.04.02 Ajaxで別ページの取得を行いました。</p> <p>2016.04.03 <a href="http://mizukazu.minibird.jp">ブログへ戻るにはこちら</a></p> <p>2016.04.04 4月5日から4月6日まで臨時休業となります。</p> <!---------------------- ↑↑ 新着情報入力エリア ↑↑ ------------------------>
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>jQuery-Ajaxお知らせ表示 | MizuKazu</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="css/sanitize.css">
<link rel="stylesheet" href="css/sytle.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>jQuery Ajaxでお知らせ表示</h1>
</header>
<div id="flexbox">
<div class="col1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor...</p>
</div>
<div class="col2">
<h2>お知らせ一覧を読み込みます。</h2>
<div class="newsarea">
<p>ロード中です...
<br>（しばらくたっても表示されない場合は<a href="news.html">こちら</a>へ。）</p>
</div>
</div>
<div class="col3">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor...</p>
</div>
</div>
<footer>
<small>© 2016 mizukazu. All Rights Reserved.</small>
<br>
<small>Powered by <a href="mizukazu.minibird.jp">MizuKazu</a></small>
</footer>
<script type="text/javascript" src="js/jquery-1.12.2.min.js"></script>
<script type="text/javascript">
$.ajax({
url: 'news.html',//読み込むhtmlファイル
dataType: 'html',//データの種類
timeout:3000,
async: true,//非同期通信有効
success: function(html) {
$('.newsarea').html(html).fadeIn(5000);//データ取得成功した時、5秒かけてクラスnewsareaにnews.html表示。
},
error: function() {
alert('読み込みに失敗しました。しばらくたってからアクセスし直してみてください。');
}
});
</script>
</body>
</html>