【Ajax】PHPにデータをPOST送信してデータを取得する

公開日：2014/05/23

更新日：2014/05/27

カテゴリー: Ajax

Ajaxを利用して指定のPHPファイルにデータを送信し、PHP側でごにょごにょやったあとの結果データを取得・出力する方法を説明しています。

loadメソッドを使う方法

loadメソッドを使ってサーバーのPHPファイルにデータを送信して、PHP側が出力した結果（データ）をページ上に表示させたいと思います。

$('エレメント').load('ここにファイルパス', {key:value});

loadメソッドの第2引数に送信したいデータを入れると、Ajaxで第1引数で指定されたファイルにそのデータを渡します（そして結果データも受け取ります）。

なお、第2引数に入れるデータは連想配列となっており、必要なデータをまとめて送信できます。

index.html

index.htmlを作成し、以下を記述します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>サンプルプログラム</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
    <script type="text/javascript">
      <!--
        function action(){
          $('#output').load('get-data.php', {number:9999});
        }
      //-->
    </script>
  </head>

  <body>
     <p><input type="button" value="サンプルの実行" onclick="action();"></p>
     <div id="output">get-data.phpに「9999」という数字を送信し、PHPの処理結果をここに表示します！</div>
  </body>
</html>

「サンプル実行」ボタンを押すことで、AjaxでPHPファイル（get-data.php）に「number」という名前でデータ「9999」をPOST送信できます。

get-data.php

次に、POST送信されてきたデータを受け取り、適当なデータを送り返すget-data.phpを作成します。

<?php
//POST送信されたデータを受け取る
$number = $_POST['number'];
//ヘッダーの設定
header('Content-type:text/plain; charset=utf8');
//結果を出力
echo "get-data.phpに「" . $number . "」が送信されてきました！";
?>