Ajaxに使える！PHPで配列をJSONに変換する方法

JSONは13日の金y・・・ではないです。

JavaScript Object Notation の略で、構造化されたテキストデータのことです。

と言ってもHTMLやXMLのようにタグがあるわけではなく、どちらかと言うとPHPで配列を出力したときと同じような形です。

Ajaxを使うときに、PHPで処理をして結果を画面に表示させるような場面は多いと思います。

JSONなんて使わずにPHPでタグを書いてそのまま渡せばいいやん！と思う人もいるかもしれませんが、プログラムのパフォーマンスで一番影響を与えるのが通信です。

PHP側でHTMLコードを生成して渡すより、JSON形式で必要なデータだけを渡しJavaScriptでHTMLを構築した方が通信する量が減るのでパフォーマンスが改善されます。

Ajax時だけでなく、PHP内でも配列はオブジェクトなのでJSON形式にしてログに出力するなど便利に使える部分があります。

今回は配列をJSONに変換したり、JSONを配列に変換する方法をご紹介します。

PHPの配列をJSONに変換

PHPの配列をJSONに変換するのは json_encode() という関数を使います。

$ary = array(
	array("name" => "佐藤", "age" => 31),
	array("name" => "鈴木", "age" => 30),
	array("name" => "田中", "age" => 29),
	array("name" => "山田", "age" => 28),
	array("name" => "豊田", "age" => 65),
);
$jsondata = json_encode($ary);

$ary = array(

array("name" => "佐藤", "age" => 31),

array("name" => "鈴木", "age" => 30),

array("name" => "田中", "age" => 29),

array("name" => "山田", "age" => 28),

array("name" => "豊田", "age" => 65),

);

$jsondata = json_encode($ary);

これで作成したJSONをHTML画面に出力した結果が次です。

[{"name":"\u4f50\u85e4","age":31},{"name":"\u9234\u6728","age":30},{"name":"\u7530\u4e2d","age":29},{"name":"\u5c71\u7530","age":28},{"name":"\u8c4a\u7530","age":65}]

1	[{"name":"\u4f50\u85e4","age":31},{"name":"\u9234\u6728","age":30},{"name":"\u7530\u4e2d","age":29},{"name":"\u5c71\u7530","age":28},{"name":"\u8c4a\u7530","age":65}]

なんか日本語の部分が変なコードになってますね。

これは文字化けではなく、ユニコードという形式になっているだけで問題はありません。

一応日本語をユニコードに変換しないでJSONを作る方法をお伝えします。

$jsondata = json_encode($ary, JSON_UNESCAPED_UNICODE);

1	$jsondata = json_encode($ary, JSON_UNESCAPED_UNICODE);

JSONに変換する json_encode() を使うのは同じですが、第二引数に JSON_UNESCAPED_UNICODE を指定します。

これで日本語がそのまま表示されます。

[{"name":"佐藤","age":31},{"name":"鈴木","age":30},{"name":"田中","age":29},{"name":"山田","age":28},{"name":"豊田","age":65}]

1	[{"name":"佐藤","age":31},{"name":"鈴木","age":30},{"name":"田中","age":29},{"name":"山田","age":28},{"name":"豊田","age":65}]

JSONをPHPの配列に変換

【前提】上で作成したJSONを sample031.json というファイルを作成し、PHPファイルと同じディレクトリに入れました。

$jsondata = file_get_contents("sample031.json");
$arraydata = json_decode($jsondata, true);
print_r($arraydata);

$jsondata = file_get_contents("sample031.json");

$arraydata = json_decode($jsondata, true);

print_r($arraydata);

1行目でファイルを読み込み、2行目でJSONに変換しています。

作成した配列を画面に出力すると次のようになっています。

Array
(
    [0] =&gt; Array
        (
            [name] =&gt; 佐藤
            [age] =&gt; 31
        )

    [1] =&gt; Array
        (
            [name] =&gt; 鈴木
            [age] =&gt; 30
        )

    [2] =&gt; Array
        (
            [name] =&gt; 田中
            [age] =&gt; 29
        )

    [3] =&gt; Array
        (
            [name] =&gt; 山田
            [age] =&gt; 28
        )

    [4] =&gt; Array
        (
            [name] =&gt; 豊田
            [age] =&gt; 65
        )

)

Array

(

[0] => Array

(

[name] => 佐藤

[age] => 31

)

[1] => Array

(

[name] => 鈴木

[age] => 30

)

[2] => Array

(

[name] => 田中

[age] => 29

)

[3] => Array

(

[name] => 山田

[age] => 28

)

[4] => Array

(

[name] => 豊田

[age] => 65

)

JSONで返すAjaxのサンプル

サンプルの仕様は、「ボタンA」を押すと、PHPにアクセスし、ユーザーリスト(名と年齢)の一覧を取得し画面に表示する。

ユーザーリストはDBから取得したことを想定し、配列で定義しJSONに変換して受け取る。

JSONで返すAjaxのサンプル

HTML・CSS

<style type="text/css">
#userlist table {
  margin-top: 50px;
}
#userlist table,
#userlist table td {
  border: 1px solid #333333;
}
#userlist table td {
  padding: 10px 20px;
}
</style>

<input type="button" id="btna" value="ボタンA" />
<div id="userlist"></div>

#userlist table {

margin-top: 50px;

}

#userlist table,

#userlist table td {

border: 1px solid #333333;

}

#userlist table td {

padding: 10px 20px;

}

</style>

jQuery

<script type="text/javascript">
$(function(){
  // AjaxでPHPからJSONデータを受け取る
  $('#btna').click(function() {
    $.ajax({
      url: 'sample031.php',
      dataType: "json",
      async: true,
      beforeSend: function(xhr, settings) {
        // ajax送信前の処理
      },
      complete: function(xhr, status) {
        // ajax応答後の処理
      },
      success: function(data) {
        // ajax通信成功時の処理
        var html = "";
        if (data.length > 0) {
          html = "<table>"
          for (var i = 0; i < data.length; i++) {
            html += "<tr>";
            html += "<td>" + data[i].name + "</td>";
            html += "<td>" + data[i].age + "歳</td>";
            html += "</tr>";
          }
          html += "</table>";
        } else {
          html = "データはありませんでした。";
        }
        $("#userlist").html(html);
      },
      error: function(xhr, status, error) {
        // ajax通信成失敗の処理
      }
    });
  });
});
</script>

$(function(){

// AjaxでPHPからJSONデータを受け取る

$('#btna').click(function() {

$.ajax({

url: 'sample031.php',

dataType: "json",

async: true,

beforeSend: function(xhr, settings) {

// ajax送信前の処理

complete: function(xhr, status) {

// ajax応答後の処理

success: function(data) {

// ajax通信成功時の処理

var html = "";

if (data.length > 0) {

html = "<table>"

for (var i = 0; i < data.length; i++) {

html += "<tr>";

html += "<td>" + data[i].name + "</td>";

html += "<td>" + data[i].age + "歳</td>";

html += "</tr>";

}

html += "</table>";

} else {

html = "データはありませんでした。";

}

$("#userlist").html(html);

error: function(xhr, status, error) {

// ajax通信成失敗の処理

}

});

</script>

PHP

<?php
$ary = array(
	array("name" => "佐藤", "age" => 31),
	array("name" => "鈴木", "age" => 30),
	array("name" => "田中", "age" => 29),
	array("name" => "山田", "age" => 28),
	array("name" => "豊田", "age" => 65),
);
$jsondata = json_encode($ary);
echo $jsondata;
?>