get():getメソッド(成功はdone、失敗はfail)による非同期通信
2016/05/07
getメソッド(成功はdone、失敗はfail)による非同期通信の書式
$.get({ url: リクエスト送信先のURL, data: URLのクエリ(パラメータ), }).done(function(data, textStatus, jqXHR){ // 成功の場合の処理 }).fail(function(jqXHR, textStatus, errorThrown){ // エラーの場合処理 });
getメソッド(成功はdone、失敗はfail)による非同期通信する場合は、
getメソッドを使用します。
具体例(getメソッド(成功はdone、失敗はfail)による非同期通信のサンプルコード)
リクエストの送信先のテスト用のPHP
1.受け取ったリクエストタイプの判定
2.ajax通信にて受け取ったパラメータを各変数に代入
3.このパラメータはmethod(非同期通信で使うメソッド)とcontents(内容)があり、レスポンス用のテストも兼ねている。
4.レスポンス用の文字列を出力。
※細かい事を言えばパラメーターのバリデートなども必要だが、動作サンプルという事で割愛。
test.php
// ※これはhtmlではなくphpファイルです、<?phpと?>で囲んでください $result = "リクエストタイプは"; if($_SERVER["REQUEST_METHOD"] == "GET"){ $result .= "getです、"; $method = $_GET["method"]; $contents = $_GET["contents"]; }else{ $result .= "postです、"; $method = $_POST["method"]; $contents = $_POST["contents"]; } $result .= "methodが". $method ."、contentsが". $contents ."です。"; echo $result;
ajax通信のjQueryのhtmlサンプル
1.ajaxの非同期通信としてgetメソッドを使用
2.ajax通信にて受け取ったパラメータを各変数に代入
3.「url:」にはリクエスト先を指定(ここでは同じディレクトリのtest.phpとする)
4.レスポンス結果が成功処理はdoneメソッドで受け取る。
5.レスポンス結果が失敗処理はfaileメソッドで受け取る。
6.リクエスト先からのレスポンスのテキストをdivタグにセット
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> <!-- --> </style> <script src="../../js/jquery-1.12.2.min.js"></script> <script> $(function(){ $.get({ url: "test.php", data: "method=get&contents=get-test", }).done(function(data, textStatus, jqXHR){ // 成功の場合処理 $("div.result").text(data); }).fail(function(jqXHR, textStatus, errorThrown){ // エラー時の処理 $("div.result").text("エラーが発生しました。ステータス:" + jqXHR.status); }); }); </script> </head> <body> <div class = "result"></div> </body> </html>
ajax通信のjQueryのhtmlサンプルのサンプルコードの結果
そして、リクエスト送信先URLを存在しないものとしてエラーを引き起こしてみる(404:Not Foundのエラー)
url: "test_notfound.php",