jQuery無双

jQueryをとことん使いこなす！ jQuery1.12対応。使い方、入門、サンプル、ノウハウをとことん極めた最強ブログ。

ajax()：ajaxメソッド(成功はdone、失敗はfail)による非同期通信

      2016/05/07

ajaxメソッド(成功はdone、失敗はfail)による非同期通信の書式

$.ajax({
  type: リクエストタイプ,
  url:  リクエスト送信先のURL,
  data: URLのクエリ（パラメータ）,
}).done(function(data, textStatus, jqXHR){
  // 成功の場合の処理
}).fail(function(jqXHR, textStatus, errorThrown){
  // エラーの場合処理
});

ajaxメソッド(成功はdone、失敗はfail)による非同期通信する場合は、
ajaxメソッドを使用します。

　

具体例(ajaxメソッド(成功はdone、失敗はfail)による非同期通信のサンプルコード)

リクエストの送信先のテスト用のPHP

１．受け取ったリクエストタイプの判定

２．ajax通信にて受け取ったパラメータを各変数に代入

３．このパラメータはmethod（非同期通信で使うメソッド）とcontents（内容）があり、レスポンス用のテストも兼ねている。

４．レスポンス用の文字列を出力。

※細かい事を言えばパラメーターのバリデートなども必要だが、動作サンプルという事で割愛。

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サンプル（typeはget）

１．ajaxの非同期通信としてajaxメソッドを使用

２．type:getとしてリクエストタイプはゲットとする

３．ajax通信にて受け取ったパラメータを各変数に代入

４．「url:」にはリクエスト先を指定（ここでは同じディレクトリのtest.phpとする）

５．レスポンス結果が成功処理はdoneメソッドで受け取る。

６．レスポンス結果が失敗処理はfaileメソッドで受け取る。

７．リクエスト先からのレスポンスのテキストをdivタグにセット

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<script src="../../js/jquery-1.12.2.min.js"></script>
<script>
$(function(){
  $.ajax({
    type: "GET",
    url:  "test.php",
    data: "method=ajax&contents=ajax-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サンプル（typeはget）のサンプルコードの結果

jquery,ajax,done,fail,サンプル,非同期通信

　
では、次にリクエストタイプをポスト（type:post）にして試す
    type: "post",
　
ajax通信のjQueryのhtmlサンプル（typeはpost）の結果

jquery,ajax,done,fail,サンプル,非同期通信

　
ちなみに、リクエストタイプ（type:のオプション）を付けないとデフォルト値のgetとなる
  $.ajax({
    url:  "test.php",
    data: "method=ajax&contents=ajax-test",
  }).done(function(data, textStatus, jqXHR){
    // 成功の場合処理
    $("div.result").text(data);
  });
　
リクエストタイプ（type:のオプション）を付けないとデフォルト値のgetとなるの結果

jquery,ajax,done,fail,サンプル,非同期通信

　
　
そして、リクエスト送信先URLを存在しないものとしてエラーを引き起こしてみる（404:Not Foundのエラー）
    url:  "test_notfound.php",
　
そして、リクエスト送信先URLを存在しないものとしてエラーを引き起こしてみる（404:Not Foundのエラー）の結果

jquery,ajax,done,fail,サンプル,非同期通信

 - 非同期通信(ajax) , , , , ,