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

jQuery

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

  

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

デモページ

2015/01/14追記 また以下も参考にしてみてください

ソースコード

ちなみに $.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,
                /**
                 * Ajax通信が成功した場合に呼び出されるメソッド
                 */
                success: function(data, dataType)
                {
                    //successのブロック内は、Ajax通信が成功した場合に呼び出される

                    //PHPから返ってきたデータの表示
                    alert(data);
                },
                /**
                 * Ajax通信が失敗した場合に呼び出されるメソッド
                 */
                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>

send.php

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

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

参考リンク

  

共有やブックマークなど