jQuery.ajax(url[,settings])で、JSON形式のデータを読み込み、表示

jQuery の jQuery . ajax( url [, settings] ) メソッドを使った Ajax リクエストで、サーバへデータを送り、JSON形式のレスポンスデータを読み込み、表示する方法。このページのサンプルは、GETメソッドのHTTPリクエストで、PHPファイルへデータを渡し、PHPファイルの実行結果を取得し、JSON形式のデータとして処理し、表示する。

実装例(サンプル)

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

「toggle」ボタンをクリックすると、「jquery-sample-ajax-json.php」ファイルの実行結果を読み込み、JSON形式のデータとして処理し、黄色のボックス要素内に表示する。リクエスト時、「year」「month」「day」のパラメータを送信し、「jquery-sample-ajax-json.php」ファイルで取得し、表示する。「toggle」ボタンを、再度クリックすると、元に戻す。

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

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

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-sample-button' ) . toggle(
        function() {
            jQuery . ajax(
                'jquery-sample-ajax-json.php',
                {
                    dataType: 'json',
                    data: {
                        year: '2011',
                        month: '11',
                        day: '28'
                    },
                    success: function( data ) {
                        jQuery . each( data, function( key, value ) {
                            jQuery( '#jquery-sample-ajax' ) . append( '<p>' + key + ': ' + value + '</p>' );
                        } );
                        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: 200px;
}
#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>

読み込むPHPファイル

{
    "年": "<?php echo  $_GET['year']; ?>",
    "月": "<?php echo  $_GET['month']; ?>",
    "日": "<?php echo  $_GET['day']; ?>"
}

スポンサード リンク

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