jquery で xml ファイルを読み込む

かしこ 171views 更新:2016年9月13日

xml ファイルを読み込んで画面に表示させようと思いました。

今回は html と javascript を分けています。

■ test.xml (読み込む xml ファイル)

<?xml version="1.0" encoding="UTF-8"?>
<test_list>
    <test_data>
        <id>1</id>
        <name>徳川家康</name>
        <text>初代</text>
    </test_data>
    <test_data>
        <id>2</id>
        <name>徳川秀忠</name>
        <text>二代目</text>
    </test_data>
    <test_data>
        <id>3</id>
        <name>徳川家光</name>
        <text>三代目</text>
    </test_data>
</test_list>

■ test.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="content-language" content="ja">
        <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
        <script src="test.js"></script>
        <title>タイトル</title>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>名前</th>
                    <th>備考</th>
                </tr>
            </thead>
            <tbody id="data_list">
            </tbody>
        </table>
    </body>
</html>

■ test.js

$(function(){
    $.ajax({
          url : 'test.xml'
        , type : 'get'
        , dataType : 'xml'
        , cache : false
        , success : function(data) {
            var count = 0 ;
            $(data).find("test_list").find("test_data").each(function(){
                $("#data_list").append("<tr id=\"data_id" + count + "\" class=\"ins_data\"></tr>") ;
                $("#data_list #data_id" + count).html(
                          "<td>" + $(this).find("name").text() + "</td>"
                        + "<td>" + $(this).find("text").text() + "</td>"
                ) ;
                count++ ;
            }) ;
        }
        , error : function() {
            alert("無いよ") ;
        }
    });
})

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません