ajaxSuccessとは
- ここで説明する ajaxSuccess とは次の語句からなる jQuery のメソッドです。
- ajax
- 読み: エイジャックス
意味: ウェブページの表示技術の一種。サーバーからのデータの取得とブラウザ上での表示を非同期的に処理させるもの。 - success
- 読み: サクセス
意味: 成功、達成
ajaxSuccessメソッドの概要
このメソッドは、ドキュメント内で行われる ajax 通信の成功時イベントにハンドラーをアタッチします。
つまり、このメソッドの実行により、ページ内で発生した ajax 通信は監視され、その通信の成功時に関数を実行することができます。
前述しているとおり、ajax 通信の 成功時 イベントにハンドラーをアタッチするので、 通信が失敗した場合には無関係です。 もしも、通信の成功や失敗に関わらず、通信の完了時に関数をアタッチしたいなら ajaxComplete() を使用してください。 また、通信の失敗時に関数をアタッチしたいなら ajaxError() を使用してください。
構文
サンプルを見る前に構文を確認しておきます。
このメソッドはグローバルイベントハンドラーです。 メソッドの呼び出し元は グローバルプロパティ を指定することが一般的 となりますので document や window プロパティを使用してください。
$(document).ajaxSuccess(handler)サンプルコードと実行結果
ここでは、このページのファイルとは別の php-post-response.php というファイルに ajax 通信を使ってデータを送信し、結果をリクエストします。
ajax 通信が成功すると通信のきっかけとなったボタンの色をライトピンクに変更します。
サンプルコード: PHP ( php-post-response.php )
<?php
$post = $_POST['sendData'];
if(strlen($post) > 0){
echo('POST メソッドで ' . $post . ' という値を受け取りました。');
}
?>
ここでは、 PHP のコードの説明は割愛させていただきます。
動作内容としては、 この php ファイルに POSTメソッドを使って sendData というキーと 値 をセットで送信すると、その受信した 値 を php の実行により出力するというものです。
サンプルコード: CSS
<style>
div{
margin: 1em 0;
}
button{
background-color: #EFEFEF;
cursor: pointer;
}
#idReceive{
display: block;
background-color: ##white;
border: thin solid ##gray;
padding: 0 1em;
}
</style>
サンプルコード: HTML
<head>
<style>...</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div><button id="idPostHello" class ="clsPost"> send POST Hello </button></div>
<div><output id="idReceive"> Waiting for load </output></div>
<div><button id="idPostWorld" class ="clsPost"> send POST World </button></div>
<script>...</script>
</body>
- 06, 08: button class ="clsPost" (ボタンです。これをクリックすると、 script の 06~08 行目のコードが実行されます。)
- 07: output id="idReceive" (出力要素です。この要素に php ファイルの実行結果が出力されます。)
サンプルコード: script
<script>
$(document).ajaxSuccess(function(eo){
$("button").css("background-color", "#EFEFEF");
$("#" + eo.currentTarget.activeElement.id).css("background-color", "##lightpink");
});
$(".clsPost").click(function(){
$("#idReceive").load("php-post-response.php", {"sendData" : $(this).text()});
});
</script>
- 02-05: $(document).ajaxSuccess(function(){ 関数の処理 }) (このページ内で ajax 通信が実行されて成功すると、関数の処理 の部分が実行されます。 ここでの処理の内容は、イベントオブジェクトから取得したアクティブボタンの id 値を元にボタンの色を変更するようにしています。)
- 06-08: $(".clsPost").click(function(){ 関数の処理 }) (class 属性に clsPost をもつ要素がクリックされると 関数の処理 の部分が実行されます。)
- 07: $("#idReceive").load("php-post-response.php", {"sendData" : $(this).text()}) (php-post-response.php ファイルの実行結果を、識別子に idReceive を持つ要素にロードします。 php ファイルにリクエストを掛けるときに、sendData というキーとセットに、ボタンに表示されているテキストを値として送信します。)