Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

47
55

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2017-10-19

経緯

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/mizumizue/php-simple-api

47
55
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up

Qiita Advent Calendar is held!

Qiita Advent Calendar is an article posting event where you post articles by filling a calendar 🎅

Some calendars come with gifts and some gifts are drawn from all calendars 👀

Please tie the article to your calendar and let's enjoy Christmas together!

47
55

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?