jQueryの$.get()を使ってxml形式のデータを取得表示してみます。
Contents
ディスプレイ広告
$.get()を使って読み込むxml形式のファイル
data.xmlを読み込みます。
<!--?xml version="1.0" encoding="utf-8"?-->
<categories>
<item>
<category>TOP</category>
<url>https://dad-union.com/</url>
</item>
<item>
<category>ABOUT</category>
<url>https://dad-union.com/about</url>
</item>
<item>
<category>JAVASCRIPT</category>
<url>https://dad-union.com/category/javascript</url>
</item>
<item>
<category>JQUERY</category>
<url>https://dad-union.com/category/jquery</url>
</item>
</categories>
xmlデータを取得表示するためのCSS記述例
※$.get()を使ってxmlデータを取得するボタン(#btn)エリアのCSS記述です。必要に応じて変更して下さい。
<style type="text/css">
#btn{
width:150px;
height:30px;
margin:0 auto;
background-color:#333;
color:#FFF;
font-weight:bold;
border:solid 1px #333333;
text-align:center;
line-height:1.8em;
cursor:pointer;
}
#btn:hover{
background-color:#FFF;
color:#333;
font-weight:bold;
border:solid 1px #333333;
}
#cat{
width:600px;
margin:0 auto;
line-height:1.8em;
padding-top:20px;
}
</style>
xml形式のデータを取得表示するJavaScriptの記述例
※id=”btn”ボタンをクリックすると$.get()を使ってdata.xmlファイルのxml形式のデータ取得し、出力先エリア(id=”cat”)に出力表示します。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#btn").one('click', function() {
$.get("data.xml",function(xml) {
$(xml).find('item').each(function() {
$("#cat").append(
'<div>'
+ $(this).children('category').text() + ' ⇒ '
+ '<a href="' + $(this).children('url').text() + '" title="' + $(this).children('category').text() + '">' + $(this).children('url').text() + '</a>'
+ '</div>'
);
});
});
});
});
</script>
xml形式のデータを取得表示するHTMLの記述例
※id=”btn”ボタンをクリックすると取得したxml形式のデータをid=”cat”タグに出力します。
<div class="clWrap">
<div id="btn">ココをクリック</div>
<div id="cat"></div>
</div>
<!--/clWrap-->
jQueryの$.get()を使ってxmlデータを取得表示するデモページ
jQueryの$.get()を使ってxmlデータを取得表示するデモ
xml形式のデータ取得方法って他にも色々ありますよね。
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。