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

$.get()を使ってxmlデータを取得してみます。
1.読み込む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>
2.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>
3.JavaScriptの記述例
<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>
4.HTMLの記述例
<div class="clWrap"> <div id="btn">ココをクリック</div> <div id="cat"></div> </div> <!--/clWrap-->
jQueryの$.get()を使ってxmlデータを取得表示するデモ
xml形式のファイルって色々と取得方法がありますよね。
-
前の記事
window.location.search:URL(アドレス)のパラメータ値をJavaScriptで取得する方法 2019.04.10
-
次の記事
getJSONでjson形式の配列情報を取得表示する方法 2019.04.12