jQueryの$.get()を使ってxmlデータを取得表示する方法

jQueryの$.get()を使ってxml形式のデータを取得表示してみます。

$.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アナリティクスタグは流用しないで下さい。