ホーム > ブログ > JQuery + xml

JQuery + xml

JQueryでxmlを扱ってみる。

１．xmlファイルを作成

wine.xml
<?xml version="1.0" encoding="UTF-8" ?>
<wine>
	<item>
		<rank>1</rank>
		<country>フランス</country>
		<amount>5,329,449</amount>
	</item>
	<item>
		<rank>2</rank>
		<country>イタリア</country>
		<amount>5,056,648</amount>
	</item>
	<item>
		<rank>3</rank>
		<country>スペイン</country>
		<amount>3,934,140</amount>
	</item>
</wine>

2．wine.xmlの読み込み + 表示

hoge.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery + xml</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// xmlファイル読み込み
function get_wine_xml(){
    $.ajax({
        url:'wine.xml',
        type:'get',
        dataType:'xml',
        timeout:1000,
        success:parse_xml
    });
}

// xmlデータ解析
function parse_xml(xml,status){
    if(status!='success')return;
    $(xml).find('item').each(write_row);
}

// 1件分のデータをtable要素に追加
function write_row(){
    var rank=$(this).find('rank').text();
    var country=$(this).find('country').text();
    var amount=$(this).find('amount').text();
    $('<tr>'+
    '<td>'+rank+'</td>'+
    '<td>'+country+'</td>'+
    '<td>'+amount+'</td>'+
    '</tr>').appendTo('table#wine_tbl');
}
</script>
</head>
<body onload="get_wine_xml()">
    <h1>国別のワイン生産量 2005年</h1>
    <table border="1" cellspacing="0" cellpadding="0" id="wine_tbl">
        <tr>
            <td>順位</td>
            <td>国</td>
            <td>生産量(トン)</td>
        </tr>
    </table>
</body>
</html>

出力結果：
順位 国 生産量(トン)
1 フランス 5,329,449
2 イタリア 5,056,648
3 スペイン 3,934,140


できましたね。
前の記事 «
次の記事 »