【Ajax】PHPにデータをGET送信し、結果をJSON形式で受け取る

公開日：2014/06/05

更新日：2014/05/08

カテゴリー: Ajax

Ajaxではサーバーにデータを投げて結果を取得して・・・という一連の動作を行いますが、受け取るデータが多い＆複雑な場合はJSON形式で受け取るのがよいです。

JSONとは？

JSONとは、JavaScriptのオブジェクトをテキスト形式で記述するためのフォーマットです（「JavaScript Object Notation」の略）。

JSON形式のデータは、JavaScriptのオブジェクトとしてデータの参照がとても楽になります。

複雑なデータや大量のデータを取得する場合はJSON形式で受け取るのがよいです。

getJSONメソッド

JSON形式でサーバーからの結果を受け取りたい場合、getJSONメソッドを使います（こちら側からのデータはGET送信）。

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

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

getJSONメソッドを使うことでサーバーにデータをGET送信して、その結果データ（コールバック関数が受け取るデータ）をJSON形式で受け取ります。

受け取ったデータはJSON形式（オブジェクト）なので、そこから必要なプロパティを簡単に取り出せます。

データをJSON形式でやりとりする

サーバー（のPHPファイル）にデータ（「9999」という数字）をGET送信し、その結果データをJSON形式で受け取り、指定エレメントに出力するとともに、テキスト色（CSSのcolor）を赤色、背景色（CSSのbasckground）を黒色に変更するプログラムを書いてみます。

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

  <body>
     <p><input type="button" value="サンプルの実行" onclick="action();"></p>
     <div id="output">get-data.phpに「9999」という数字をGET送信し、PHPの処理結果をJSON形式で受け取り、ここにテキストを表示します（文字色は赤、背景色は黒になります）。</div>
  </body>
</html>

get-data.php

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

<?php
//GET送信されたデータを受け取る
$number = $_GET['number'];
//GET送信されてきたデータの確認
if($number == 9999){
  //渡すデータを配列で格納
  $array_data = array(text=>'ちゃんとデータのやりとりができました！', color=>'#ff0000', background=>'#000000');
}
//ヘッダーの設定
header('Content-type:application/json; charset=utf8');
//渡すデータ（配列）をJSON形式にデコードして出力
echo json_encode($array_data);
?>

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

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

あわせて読んでほしい！

Follow @ysklog_net 　