Help us understand the problem. What is going on with this article?

PHPでJSONを返すだけのAPIを実装する

経緯

APIの右も左も分かっていなかったので、理解を深める為に実装した時のやつ。

HTTPステータスコードも返さないし、headerも返さない。
jsonだけ返す。
<2019/8/28追記>
嘘。明示的にHTTPステータスコードを指定しなくとも問題なければ200が返るし、下記で返るのはHEADERを指定していないので、HTMLのBodyにJSONっぽい何かが入ったResponseが返る。JSONとして受け取り側に認識させたいならば、Content-Type: application/jsonをResponseHeaderに付与してやる。あと多分json_encodeJSON_UNESCAPED_UNICODEオプションを指定してやらないとマルチバイト文字がunicodeで表示されてしまう問題が発生するはずなので注意。

サーバーサイド(API)

コード

<?php
// 連想配列用意
$array = [
    'tokyo' => [
        '品川',
        '五反田',
        '三軒茶屋',
        '四谷'
    ],
    'kanagawa' => [
        '横浜',
        '相模原',
        '湘南',
        '鎌倉'
    ],
    'saitama' => [
        '所沢',
        '狭山',
        '川口',
        '浦和',
        '小手指',
        '飯能'
    ]
];

// Origin null is not allowed by Access-Control-Allow-Origin.とかのエラー回避の為、ヘッダー付与
header("Access-Control-Allow-Origin: *");

echo json_encode($array);

コード概要

  • Response用のデータを連想配列で用意
  • 連想配列をJSON変換
  • echoして結果をResponseBodyに吐き出す

header("Access-Control-Allow-Origin: *");はエラー対策。
jQueryで$.getJSONしようとした時にエラーが出るので、エラーが出ないようにヘッダー情報を付与。
<2019/8/28追記>
CORS対策。
CrossSiteResourceSharingの略。

ウェブアプリケーションは、自分のオリジンとは異なるオリジン (ドメイン、プロトコル、ポート番号) からリソースをリクエストするとき、オリジン間 HTTP リクエストを実行します。

とあるようにブラウザで別オリジンのリソースへアクセスしようと場合、セキュリティ上の理由でリクエストが制限されてしまうので、サーバー側のResponseHeaderにCORS許可するよってHeaderを付与してやることでその制限を外すことができる。

他にも自分はやったことがないが、JSONPを使うことでも回避ができるらしい。が、危険という情報もあるのでよく調べたほうがよいかも。

jQueryを利用したフロント側からAPIへのリクエスト例

フロントでAPIを叩く時のコード(jQuery)

コード

$(function() {
    $.getJSON('http://localhost/echo_json.php', function(data) {
        Object.keys(data).forEach(function (key) {
            $('#contents').append('<ul id="' + key + '">');
            data[key].forEach(function (value, index, array) {
                $(`#${key}`).append('<li>' + value + '</li>');
            });
        });
    });
});

コード概要

  • $.getJSONメソッドを使って、JSONを取ってくる。
  • 第一引数はAPIのURL(ローカルだったらjsonを出力するphpのFilePath)
  • 第二引数はコールバック関数(処理はコールバック関数の中に書く)
  • オブジェクトが返ってくるのでforEachで回す。(オブジェクトは普通にはforEachでは回せないので注意。)

上記コードを使ってブラウザで表示

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>サーバー側(PHP)でJSONをechoして、クライアント側(jQuery)で処理してみる</title>
    <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
</head>
<body>
    <h2>サーバー側(PHP)でJSONをechoして、クライアント側(jQuery)で処理してみる</h2>
    <div id="contents">

    </div>
</body>
</html>

Result

サーバー側(PHP)でJSONをechoして、クライアント側(jQuery)で処理してみる

●品川
●五反田
●三軒茶屋
●四谷

●横浜
●相模原
●湘南
●鎌倉

●所沢
●狭山
●川口
●浦和
●小手指
●飯能

こんな感じでブラウザに表示されていれば成功

参考文献

load() を使うと Chrome が文句言う
AjaxでAccess-Control-Allow-Originのエラーを回避する方法
コールバック関数とは
オブジェクトをforEachで回すには

追記 久しぶりに記事編集

大分前の全くわかってなかった時の記事だけど、割と見られるようなので整理。
下記にDockerでさくっと動かせる環境込のソースを用意してみた。
https://github.com/trewanek/php-simple-api

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした