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

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

ブラウザの実行結果

ソースコード

ちなみに $.ajax の data には 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かも知れません。

参考リンク

zhsnooze より:

2013年02月13日 1:03 AM

下記経由で「ここが分かりやすい」と書いてあったので
こちらに来ましたが、なるほど、めちゃくちゃ分かりやすい。ソースもきれい。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/