重要な事 $.extend( object, object ) で、前のオブジェクトに後のオブジェクトが追加されます。ですから、前のオブジェクトに $ を指定し、後のオブジェクトに { メソッド名 : function(引数) {処理} } を指定すればいい事になります。 グローバル変数に使う また、この extend では、単純な変数としての JSON オブジェクトに利用して、window.mydata = {} として空のオブジェクトをグローバルに作っておいて、jQuery の内部で処理したデータを extend メソッドで追加させます。 そうすると、(ここでは)後から mydata.ken と mydata.hour と mydata.browser で参照できる事になります。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
window.mydata = {};
$.extend( $, { myfunc: function( url, target, item ) {
$.ajax({
// javascript の実行分を書いたテキストを呼び出す
url: url,
cache: false,
dataType: "json"
}).done( function( result, textStatus, jqXHR ) {
// result がそのまま JSON オブジェクトです
$.extend( window.mydata, result );
var op = null;
for( var i = 0; i < result[item].length; i++ ) {
op = document.createElement("option");
$(op).append(result[item][i]);
$(target).append(op);
}
});
}
} );
$(function () {
$.myfunc("http://lightbox.on.coocan.jp/ken.php", "#target1", "ken" );
$.myfunc("http://lightbox.on.coocan.jp/hour.php", "#target2", "hour" );
$.myfunc("http://lightbox.on.coocan.jp/browser.php", "#target3", "browser" );
console.dir(mydata);
});
</script>
<select id="target1">
</select>
<hr />
<select id="target2">
</select>
<hr />
<select id="target3">
</select>
文法的に重要なところ result[item] は、最初の処理では result.ken と同じ内容を参照をします。JavaScript のオプジェクトのプロパティの参照方法は、識別子として参照する方法と、["文字列"] という連想配列(のようなもの)として参照する方法があります。 ですから、後者では動的(文字列変数を使って)に JSON の内部を参照可能になりますken.php
<?
header( "Access-Control-Allow-Origin: *" );
header( "Content-Type: text/plain; Charset=utf-8" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
print '{"ken" : ["北海道","青森県","岩手県","宮城県","秋田県","山形県","福島県","茨城県","栃木県","群馬県","埼玉県","千葉県","東京都","神奈川県","新潟県","富山県","石川県","福井県","山梨県","長野県","岐阜県","静岡県","愛知県","三重県","滋賀県","京都府","大阪府","兵庫県","奈良県","和歌山県","鳥取県","島根県","岡山県","広島県","山口県","徳島県","香川県","愛媛県","高知県","福岡県","佐賀県","長崎県","熊本県","大分県","宮崎県","鹿児島県","沖縄県"]}';
?>
<?
header( "Access-Control-Allow-Origin: *" );
header( "Content-Type: text/plain; Charset=utf-8" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
print '{"hour" : ["１時間","２時間","３時間","４時間","５時間","６時間","７時間","８時間","９時間","１０時間","１１時間","１２時間","１８時間","１９時間","２０時間","２１時間","２２時間","２３時間","２４時間"]}';
?>
<?
header( "Access-Control-Allow-Origin: *" );
header( "Content-Type: text/plain; Charset=utf-8" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
print '{"browser" : ["chrome","firefox","ie6","ie7","ie8","ie9","ie10","safari","opera"]}';
?>
php を使用しているのは、Access-Control-Allow-Origin: * を出力する為で、これによって、別ドメインからのデータの読み込みを JavaScript( クライアント ) から可能になります。 ですから、IE8 や IE9 以外( それより前は論外 ) ならば、このコードを普通に実行して、データがセットされたコンボボックスを作成する事が出来るはずです。
|
|
【メソッド:jQueryの最新記事】
- jQuery の nextAll と prevAll で、テーブル行の任意のセルをクリックしてその行の全ての TD 内のデータを取得する
- jQuery で要素の作成や移動を行う、append、prepend、after、before で TABLE 要素内の行を扱うサンプル
- jQuery の .contents と .children の違い
- jQuery の .children で、直近の子要素のみを選択して処理する
- jQuery の .filter と .end で同じ集合に対して何度も色々な設定を行う
- jQuery で全て動的に PRE(親)要素の中にアンカー(リンク)を作成して行く処理 : $("<a></a>")
- jQuery の trigger メソッドは、一括で既存の jQuery イベントを呼び出し、その時追加のパラメータを渡す事ができます
- JavaScript と jQuery : 位置関係から id の無い要素の参照を取得
- JavaScript DOMとjQuery : 同一階層(または下の階層)の要素を親経由で参照する
- jQuery の .val() と .val('値') と一括変更用の .val(関数)
- jQuery のイベント名によるイベント登録の中身
- jQuery の each メソッドの『秘密の使い方』
- jQuery の .text('値') と .html() で HTMLエンティティに変換
- jQuery : animation メソッド
