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",
