jQuery . get( url [,data] [,success(data,textStatus,jqXHR)] [,dataType] )

jQuery API の jQuery . get( url [, data] [, success( data, textStatus, jqXHR ) ] [, dataType] ) は、GETメソッドのHTTPリクエストで、サーバからデータを読み込むメソッド。

引数

url

リクエスト送信先のURLを含む文字列。

data

オプション。

サーバへ送信するデータ。マップで指定する。

success( data, textStatus, jqXHR )

オプション。

リクエストが成功すると実行するコールバック関数。

data

リクエストに対する戻り値。

textStatus

リクエストの現在の状態。

jqXHR

XMLHttpRequestオブジェクト。

dataType

オプション。

予想される、リクエスト結果のデータタイプ。

指定できるデータタイプ:xml, html, script, json, jsonp, text

記述方法

jQuery . get( url );

GETメソッドのHTTPリクエストで、「url」に指定したURLからデータを読み込む。

jQuery . get( url, { キー1:1, キー2:2 } );

GETメソッドのHTTPリクエストで、「url」に指定したURLからデータを読み込む。リクエスト時、パラメータを送信。

jQuery . get( url, function( data ) {
    jQuery( セレクター ) . html( data );
} );

GETメソッドのHTTPリクエストで、「url」に指定したURLからデータを読み込む。読み込んだデータを、「セレクター」にマッチする要素内に表示。

記述例

jQuery . get( 'sample.php' );

GETメソッドのHTTPリクエストで、「sample.php」からデータを読み込む。

jQuery . get( 'sample.php', { year: '2011', month: '11', day: '15' } );

GETメソッドのHTTPリクエストで、「sample.php」からデータを読み込む。リクエスト時、「year」「month」「day」のパラメータを送信。

jQuery . get( 'sample.php', function( data ) {
    jQuery( '#sample-message' ) . html( data );
} );

GETメソッドのHTTPリクエストで、「sample.php」からデータを読み込む。読み込んだデータを、idが「#sample-message」の要素に表示。

実装例(サンプル)

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

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

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

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

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-sample-button' ) . toggle(
        function() {
            jQuery . get(
                'jquery-sample-get.php',
                { year: '2011', month: '11', day: '15' },
                function( data, textStatus ) {
                    if( textStatus == 'success' ) {
                        jQuery( '#jquery-sample-textStatus' ) . text( '読み込み成功' );
                    }
                    jQuery( '#jquery-sample-get' ) . html( data );
                }
                ,'html'
            );
            if( jQuery( '#jquery-sample-textStatus' ) . text() == '' ) {
                jQuery( '#jquery-sample-textStatus' ) . text( '読み込み失敗' );
            }
        },
        function() {
            jQuery( '#jquery-sample-get' ) . html( '' );
            jQuery( '#jquery-sample-textStatus' ) . text( '' );
        }
    );
} );
// -->
</script>

CSS

<style type="text/css">
<!--
#jquery-sample {
    margin: 10px;
    width: 200px;
}
#jquery-sample-get {
    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-get"></div>
</div>

読み込むPHPファイル

<p>読み込んだ内容。</p>
<p>年:<?php echo  $_GET['year']; ?>年</p>
<p>月:<?php echo  $_GET['month']; ?>月</p>
<p>日:<?php echo  $_GET['day']; ?>日</p>

スポンサード リンク

カテゴリー: Ajax, API, JavaScript, jQuery, 省略形メソッド   タグ:   この投稿のパーマリンク

コメントは受け付けていません。