web屋の備忘録

ホームページ制作、webマーケティング、技術資料など

*

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

      2016/01/12

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <title>jQuery & Ajax & PHP Example</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <script type="text/javascript">
    $(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) { /** Ajax通信が成功した場合に呼び出される */
                    //返ってきたデータの表示(当サンプルだと「OK」か「The parameter of "request" is not found.」)
                    alert(data);
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {  /** Ajax通信が失敗した場合に呼び出される */
                        // 通常はここでtextStatusやerrorThrownの値を見て処理を切り分けるか、
                        // 単純に通信に失敗した際の処理を記述します。
                        this; // thisは他のコールバック関数同様にAJAX通信時のオプションを示します。
                        alert('Error : ' + errorThrown);
                }
            });
        });
 
        /** サブミット後、ページをリロードしないようにする */
        $('form').submit(function() {
            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.';
}
?>

 - jQuery・JavaScript