jQuery & Ajax通信を使ってPHPにPOSTでデータを送信するサンプル

jQuery

jQueryのajaxメソッドを使ってPHPとAjaxで非同期通信するサンプルを作成してみました。
HTTP通信をPOSTメソッドで行い、通信に成功した場合PHPから返された文字列を表示するっていうだけの単純なものです。

  
この記事は2年以上前に書かれたものです。
情報が古い可能性があります。

ブラウザの実行結果

ソースコード

ちなみに $.ajaxdata には Object形式 で渡すと良いみたいです。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <title>jQuery & Ajax & PHP Example</title>

  <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
  <script>
  $(document).ready(function() {
    /**
     * 送信ボタンクリック
     */
    $('#send').click(function() {
      // POSTメソッドで送るデータを定義します var data = {パラメータ名 : 値};
      var data = {'request' : $('#request').val()};

      /**
       * Ajax通信メソッド
       * @param type  : HTTP通信の種類
       * @param url   : リクエスト送信先のURL
       * @param data  : サーバに送信する値
       */
      $.ajax({
        type: "POST",
        url: "send.php",
        data: data,
      }).success(function(data, dataType) {
        // successのブロック内は、Ajax通信が成功した場合に呼び出される

        // PHPから返ってきたデータの表示
        alert(data);
      }).error(function(XMLHttpRequest, textStatus, errorThrown) {
        // 通常はここでtextStatusやerrorThrownの値を見て処理を切り分けるか、単純に通信に失敗した際の処理を記述します。

        // this;
        // thisは他のコールバック関数同様にAJAX通信時のオプションを示します。

        // エラーメッセージの表示
        alert('Error : ' + errorThrown);
      });

      // サブミット後、ページをリロードしないようにする
      return false;
    });
  });
  </script>
</head>
<body>
  <h1>jQuery & Ajax & PHP Example</h1>
  <form method="post">
    <p><textarea id="request" cols="20" rows="4"></textarea></p>
    <p><input id="send" value="送信" type="submit" /></p>
  </form>
</body>
</html>

jQuery 1.8以上の場合、以下のように書き換えます。

  • success()done()
  • error()fail()
  • complete()always()

send.php

<?php
header("Content-type: text/plain; charset=UTF-8");

if(isset($_SERVER['HTTP_X_REQUESTED_WITH'])
   && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
{
  // Ajaxリクエストの場合のみ処理する

  if (isset($_POST['request']))
  {
      //ここに何かしらの処理を書く(DB登録やファイルへの書き込みなど)
      echo "OK";
  }
  else
  {
      echo 'The parameter of "request" is not found.';
  }
}
?>

書き込み処理の前に、送られてきた値が期待してる値か(数値チェックなど)もしっかり行っておきましょう。
また直接PHPファイルにアクセスしてないか、Ajaxに限定する場合はAjaxによる通信であるか判別するとGoodかも知れません。

参考リンク

  

共有やブックマークなど

6 Responses to “jQuery & Ajax通信を使ってPHPにPOSTでデータを送信するサンプル”

  1. zhsnooze より:

    下記経由で「ここが分かりやすい」と書いてあったので
    こちらに来ましたが、なるほど、めちゃくちゃ分かりやすい。ソースもきれい。http://blogs.pk-brothers.com/engineerings/%E3%80%90cakephp%E3%80%91ajax%E9%80%9A%E4%BF%A1%E3%81%A7%E9%9D%9E%E5%90%8C%E6%9C%9Fdb%E7%99%BB%E9%8C%B2%E3%81%8B%E3%82%89%E3%81%AE%E8%A1%A8%E7%A4%BA/

  2. […] □jQuery & Ajax通信を使ってPHPにPOSTでデータを送信するサンプル http://webcake.stars.ne.jp/webdesign/jquery-ajax-php-post-sample.html     このサイト見ればほとんどできちゃいます! […]

  3. […] jQuery & Ajax通信を使ってPHPにPOSTでデータを送信するサンプル – WebCake […]

  4. […] 早速 Ajax を使って POST するサンプルコードを載せてくれているWEBCAKEの記事を 参考にコードを実装。 […]

  5. […] こうする 参考https://webcake.stars.ne.jp/jquery-ajax-php-post-sample.html […]