nagamatsu
htmlにxmlファイルを読み込ませたい
新着ニュースの更新などで良く使う、xmlファイルの読み込みを実装しました。
今回はjQueryでhtmlを追加する書き方をしています。
まず、htmlを用意します。
日付とテキストリンクを更新するシンプルな表示です。
1 2 3 4 5 6 7 8 | < ul class = "linkbox-news" > < li > < time >16.01.23</ time > < p > < a href = "#" taeget = "_blank" >タイトルやコピーが入ります</ a > </ p > < li > </ ul > |
jQueryで書き出す部分を削除し、外側のulタグを残します。
1 | < ul class = "linkbox-news" ></ ul > |
xmlは次のような記述です。
日付、URL、テキストリンクの文言が更新できるように設定しています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <?xml version="1.0" encoding="utf-8"?> <news> <item> <time>16.01.15</time> <link>#</link> <article>ダミーダミーダミー01</article> </item> <item> <time>16.02.20</time> <link>#</link> <article>ダミーダミーダミー02</article> </item> <item> <time>16.02.30</time> <link>#</link> <article>ダミーダミーダミー03</article> </item> </news> |
jQueryは次のように記述しました。
jQuery.ajax() を使い、$.ajax({dataTyle: 'xml'})とすればxmlファイルを読み込むことができます。
$('item', data) で取得したXML内の<item>の情報を抽出します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | $( function () { $.ajax({ url: 'news.xml' , dataType: 'xml' , success: function (data) { // NEWSページ var insertContents = '' ; $( 'item' , data).each( function () { var thisItem = $( this ); insertContents += '<li>' ; insertContents += '<time>' ; insertContents += thisItem.children( 'time' ).text(); insertContents += '</time>' ; insertContents += '<p>' ; insertContents += '<a href="' + thisItem.children( 'link' ).text() + '" target="_blank">' ; insertContents += thisItem.children( 'article' ).text(); insertContents += '</a>' ; insertContents += '</p>' ; insertContents += '</li>' ; }; $( '.linkbox-news' ).append(insertContents); } }); }); |
追加するhtmlは変数insertContentsに代入されている内容です。
変数insertContentsに1行ずつ追加していき、<li></li>までを表示させます。
<item>の個数分のhtmlを<ul class="linkbox-news"></ul>内に繰り返し追加します。
実装すると下記のサンプルのようにhtmlで表示されます。
※cssは指定していません。