デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

jQuery.post( )サーバーからpost形式でデータを取得

構文

サーバーからpost形式でデータを取得返値:jqXHRオブジェクト
jQuery.post( url [,object] [function] [type] )ver1.0〜
・url:読む込むデータのurl
・object:サーバに送るデータを設定。値の型はobjectオブジェクト。
・function:通信が「成功」したら実行される処理を設定。以下の引数を受け取る
 ・第1引数:取得したデータ
 ・第2引数:状態(success、error、notmodified、timeout、parsererror)
 ・第3引数:jqXHRオブジェクト
・type:予期されるデータの形式(省略してもxml,json,script,html位は判断してくれます)

機能

jQuery.postメソッドはjQuery.getメソッドのリクエスト方式をpostに変更しただけのメソッドです。リクエスト形式が異なるだけで、利用方法はjQuery.getメソッドと同じなので、ここでは詳細は省きます。
先にjQuery.getメソッドを確認して下さい。

jQuery.postメソッドはphpなどサーバーサイドのプログラムと連携することが可能だと思います(例えば「第2引数のobjectオブジェクトで渡したデータによって、返されるデータが変更される」など)。しかし私がサーバーサイドの知識を持っていないため、サーバーサイドとの連携に関する説明はしていません

解説

データを取得する

まずは読み込むデータを確認します。読み込むデータの文字コードは「UTF-8」にしなければなりません。ブラウザで開いた際に文字化けした時は、文字コードを変更して確認して下さい。

読込データ(data/simple.txt)には2バイト文字(日本語)で2行のテキストデータになっています。そして1行目末には改行タグ(<br/>)が設定してあります。postメソッドは様々なデータを扱うことができ、自動的にデータの形式を判断してくれます。この場合はhtmlタグがあるため「html」データとして読み込まれます。

サンプル(post/01.html)を開いてbody内にdiv要素とbutton要素があることを確認して下さい。jQueryは以下の様に記述され、buttonをクリックするとjQuery.postメソッドを利用して、読込データ(data/simple.txt)を読み込みます。読込が完了すると第2引数に設定したpostFuncが実行されます。

$("button").click(function(){
	$.post("../data/simple.txt", postFunc);
});

postFuncは以下の様に記述され、受信したデータ(myData)はhtmlメソッドを利用してdiv要素内に表示し、状態はappendメソッドを利用してbody要素内に追加します。

function postFunc(myData, myStatus){
	$("div").html(myData);
	$("body").append("myStatus = " + myStatus);
};

結果として、buttonをクリックするとdiv要素内に読み込んだデータが表示されます(htmlと判断され、改行タグ<br/>も機能します)。またdiv要素の下に状態「myStatus = success」が表示されます。

getメソッドの引数に設定したfunctionは無名関数で設定することが多いので、そのサンプルも用意しました。
→サンプル(post/01b.html

$("button").click(function(){
	$.post("../data/simple.txt", function (myData, myStatus){
		$("div").html(myData);
		$("body").append("myStatus = " + myStatus);
	});
});

関連項目

リクエスト形式をgetにしてデータを読み込みたい場合はjQuery.getメソッドを利用してください。
jQuery.postメソッドはjQuery.ajaxメソッドの簡略形です。より詳細な設定を行いたい場合はjQuery.ajaxメソッドを利用して下さい。