jQuery無双

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

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

   

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

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

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

 

具体例(postメソッド(成功は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の非同期通信としてpostメソッドを使用

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(){

  $.post({
    url:  "test.php",
    data: "method=post&contents=post-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サンプルのサンプルコードの結果

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

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

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

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