【Ajax】PHPにデータをPOST or GET送信し、結果を取得して処理する

公開日：2014/06/01

更新日：2014/05/03

カテゴリー: Ajax

Ajaxを利用してデータを指定のPHPファイルに送信（POST、GET）し、PHPの処理結果であるデータを取得して処理を行う方法を説明します。

postメソッドとgetメソッド

指定ファイルにデータをPOST送信したい場合はjQueryオブジェクトのpostメソッドを利用します。また、GET送信したい場合はgetメソッドを利用します。

$.post('ここにファイルパス', {key:value}, 関数);
$.get('ここにファイルパス', {key:value}, 関数);

第1引数にデータを送信するファイルの指定
第2引数に送信するデータ（連想配列）を指定
第3引数に通信が完了した後の処理を行う関数（コールバック関数）を指定

コールバック関数について

Ajaxでのサーバー通信が終わったあと、サーバーから結果（データ）を取得できますが、第3引数に指定した関数がそれを受け取り、そのあとの処理を行えます。

こうした後で自動的に呼び出される関数のことをコールバック関数といいます。

loadメソッドとの違い

【Ajax】PHPにデータをPOST送信してデータを取得するにあるようにloadメソッドでもpostメソッドと同じようにサーバーとの通信を行えて、第3引数にコールバック関数を指定できますが、loadメソッドはページの指定エレメントにデータを表示するものなので、「エレメントにデータを表示」という動作はキャンセルできません。

そのためエレメントに出力せずに通信後の処理を行いたい場合は、postまたはgetメソッドを使うのがよいです。

PHPにデータをPOST送信し、結果を取得して処理

指定PHPファイルに「9999」というデータをPOST送信し、その結果を受け取って指定エレメントに出力するとともに、そのテキスト色（CSSのcolor）を赤色に変更するプログラムを書いてみます。

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(){
          $.post('get-data.php', {number:9999}, csschange);
        }
	function csschange(result){
	  $('#output').css('color', '#ff0000');
	  $('#output').text(result);
	}
      //-->
    </script>
  </head>

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

get-data.php

次にPOST送信されてきたデータを受け取るPHPファイルget-data.phpを作成します。

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

これら2つのファイルをアップロードし、index.htmlにアクセスすればちゃんと動作するはずです。

動作確認はサンプルを確認してください。

あわせて読んでほしい！

Follow @ysklog_net 　