jQuery無双

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

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

   

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

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

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

　

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

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

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

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

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

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

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

test.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// ※これは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サンプル

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!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のエラー）
1
url:  "test_notfound.php",
　
そして、リクエスト送信先URLを存在しないものとしてエラーを引き起こしてみる（404:Not Foundのエラー）の結果

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

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

S