jQuery.ajax(settings)で、xml形式のデータを読み込みパースし表示

jQuery の jQuery . ajax( settings ) メソッドを使った Ajax リクエストで、xml形式のデータを読み込み、パースし、表示する方法。

実装例(サンプル)

実装例(サンプル)の動作について

「toggle」ボタンをクリックすると、「jquery-sample-ajax-xml.xml」ファイルを読み込み、パースし、黄色のボックス要素内に表示する。

読み込みが成功すると、「toggle」ボタンの右横に「読み込み成功」と表示する。

「toggle」ボタンを、再度クリックすると、元に戻す。

実装例(サンプル)のソースコード

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-sample-button' ) . toggle(
        function() {
            jQuery . ajax( {
                url: 'jquery-sample-ajax-xml.xml',
                dataType: 'xml',
                success: function( data ) {
                    jQuery ( data ) . find( 'color' ) . each( function() {
                        var name = jQuery ( this ) . find( 'name' ) . text();
                        var colorName = jQuery ( this ) . find( 'colorName' ) . text();
                        var colorCode = jQuery ( this ) . find( 'colorCode' ) . text();
                        var html = '<p style="color:' + colorName + ';">' + name + ':' + colorName + ':' + colorCode + '</p>';
                        jQuery( '#jquery-sample-ajax' ) . append( html );
                    } );
                    jQuery( '#jquery-sample-textStatus' ) . text( '読み込み成功' );
                },
                error: function( data ) {
                    jQuery( '#jquery-sample-textStatus' ) . text( '読み込み失敗' );
                }
            } );
        },
        function() {
            jQuery( '#jquery-sample-ajax' ) . html( '' );
            jQuery( '#jquery-sample-textStatus' ) . text( '' );
        }
    );
} );
// -->
</script>

CSS

<style type="text/css">
<!--
#jquery-sample {
    margin: 10px;
    width: 300px;
}
#jquery-sample-ajax {
    margin: 10px;
    padding: 10px;
    height: 100px;
    background-color: yellow;
    border: 1px solid gray;
    border-radius: 10px;
}
-->
</style>

HTML

<div id="jquery-sample">
    <p>
        <button id="jquery-sample-button">toggle</button>
        <span id="jquery-sample-textStatus"></span>
    </p>
    <div id="jquery-sample-ajax"></div>
</div>

読み込むxmlファイルの内容

<colors>
    <color>
        <name>赤色</name>
        <colorName>red</colorName>
        <colorCode>#ff0000</colorCode>
    </color>
    <color>
        <name>青色</name>
        <colorName>blue</colorName>
        <colorCode>#0000FF</colorCode>
    </color>
    <color>
        <name>緑色</name>
        <colorName>green</colorName>
        <colorCode>#008000</colorCode>
    </color>
</colors>

スポンサード リンク

カテゴリー: Ajax, API, JavaScript, jQuery パーマリンク