jQuery API の jQuery . post( url [, data] [, success( data, textStatus, jqXHR ) ] [, dataType] ) は、POSTメソッドのHTTPリクエストで、サーバからデータを読み込むメソッド。
引数
- url
リクエスト送信先のURLを含む文字列。
- data
オプション。
サーバへ送信するデータ。マップで指定する。
- success( data, textStatus, jqXHR )
オプション。
リクエストが成功すると実行するコールバック関数。
- data
リクエストに対する戻り値。
- textStatus
リクエストの現在の状態。
- jqXHR
XMLHttpRequestオブジェクト。
- dataType
オプション。
予想される、リクエスト結果のデータタイプ。
指定できるデータタイプ：xml, html, script, json, jsonp, text
記述方法
POSTメソッドのHTTPリクエストで、「url」に指定したURLからデータを読み込む。
POSTメソッドのHTTPリクエストで、「url」に指定したURLからデータを読み込む。リクエスト時、パラメータを送信。
jQuery( セレクター ) . html( data );
} );
POSTメソッドのHTTPリクエストで、「url」に指定したURLからデータを読み込む。読み込んだデータを、「セレクター」にマッチする要素内に表示。
記述例
POSTメソッドのHTTPリクエストで、「sample.php」からデータを読み込む。
POSTメソッドのHTTPリクエストで、「sample.php」からデータを読み込む。リクエスト時、「year」「month」「day」のパラメータを送信。
jQuery( '#sample-message' ) . html( data );
} );
POSTメソッドのHTTPリクエストで、「sample.php」からデータを読み込む。読み込んだデータを、idが「#sample-message」の要素に表示。
実装例（サンプル）
実装例（サンプル）の動作について
「toggle」ボタンをクリックすると、「jquery-sample-post.php」ファイルの実行結果を読み込み、黄色のボックス要素内に表示する。リクエスト時、「year」「month」「day」のパラメータを送信し、「jquery-sample-post.php」ファイルで取得し、表示する。「toggle」ボタンを、再度クリックすると、元に戻す。
読み込みが成功すると、「toggle」ボタンの右横に「読み込み成功」と表示する。
実装例（サンプル）のソースコード
JavaScript
<!--
jQuery( function() {
jQuery( '#jquery-sample-button' ) . toggle(
function() {
jQuery . post(
'jquery-sample-post.php',
{ year: '2011', month: '11', day: '15' },
function( data, textStatus ) {
if( textStatus == 'success' ) {
jQuery( '#jquery-sample-textStatus' ) . text( '読み込み成功' );
}
jQuery( '#jquery-sample-post' ) . html( data );
}
,'html'
);
if( jQuery( '#jquery-sample-textStatus' ) . text() == '' ) {
jQuery( '#jquery-sample-textStatus' ) . text( '読み込み失敗' );
}
},
function() {
jQuery( '#jquery-sample-post' ) . html( '' );
jQuery( '#jquery-sample-textStatus' ) . text( '' );
}
);
} );
// -->
</script>
CSS
<!--
#jquery-sample {
margin: 10px;
width: 200px;
}
#jquery-sample-post {
margin: 10px;
padding: 10px;
height: 100px;
background-color: yellow;
border: 1px solid gray;
border-radius: 10px;
}
-->
</style>
HTML
<p>
<button id="jquery-sample-button">toggle</button>
<span id="jquery-sample-textStatus"></span>
</p>
<div id="jquery-sample-post"></div>
</div>
読み込むPHPファイル
<p>年：<?php echo $_POST['year']; ?>年</p>
<p>月：<?php echo $_POST['month']; ?>月</p>
<p>日：<?php echo $_POST['day']; ?>日</p>