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

公開日:
更新日:
カテゴリー: 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にアクセスすればちゃんと動作するはずです。

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

 

 

あわせて読んでほしい!

 

コメント

1:佐藤肇:2015/06/10 18:48:10

動作確認はサンプルを確認では、正しく動作しますが、サンプル・ソースを実行すると何も動きません。 PHP(get-data.php)のソースが正しくないように見えます。get-data.phpのソースを提示していただけないでしょうか? 宜しくお願い致します。

2:管理人:2015/06/10 21:30:21

佐藤肇さんはじめまして。
以下、PHP(get-data.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);

記事中にあるPHPソースと同じはずなので、おそらく別のところに問題があるはずです。

コメントフォーム
お名前
コメント