PHPでAPIを作成しJavaScript(jQuery無し)からリクエストする方法
管理画面等から何らかのデータをMySQLに登録し、そのデータをPHPで作成したAPIでJSON形式にて出力させたい。また、そのAPIにはJavaScript(jQuery無し)でリクエストし、戻り値によって処理を分岐させたい。以下に方法をメモ。
PHP側
管理画面等からMySQLにデータを登録したり、MySQLからデータをひっぱってくるのは普段から行う手順なので今回は無し。
識別子(uid)があれば「識別子・リクエスト日時・ステータス(true)」を返し、なければ「ステータス(false)」をJSON形式で返す簡単なAPIを作成する。以下ソースコード。
<?php
$respons['status'] = false;
if( $_GET['uid'] ){
$respons['uid'] = $_GET['uid'];
$respons['date'] = date('Y-m-d H:i:s');
$respons['status'] = true;
}
header("Access-Control-Allow-Origin: *");
echo json_encode($respons);
JavaScript側
<script>
const request = new XMLHttpRequest();
request.open('GET', 'http://test.com/api.php?uid=1', true); //URLは適宜変更する
request.onload = function () {
const data = this.response;
const json = JSON.parse(data);
//API側で正常に処理されている場合
if( json.status ){
console.log(json); //Object { status: true, uid: "1", date: "2021-03-19 19:19:20" }
//API側でエラーが発生した場合
}else{
}
};
request.send();
</script>
所感
今回はMySQL関連の処理を省いたが、実際に導入する際は「識別子が数値かどうか」等のチェックを入念に行う必要がありそう。
また、API側のエラー時に原因究明をしやすいよう、エラーコードも返す方が良さそう。
関連記事
-
-
「slick」でブラウザ幅がPCの場合はスライダーを表示し、スマホ幅の場合はスライダー無しにする方法
slickプラグインで画像スライダーを設置しているページがあり、PCのブラウザ幅 ...
-
-
Leafletでマップ上に通知(トースト)機能を追加する方法(Leaflet.Notifications)
Leafletでマーカー内のボタンクリック時等、ユーザーが何らかのアクションを行 ...
-
-
leaflet.jsとOSMでマーカーの画像をそれぞれ指定する
leaflet.jsとOpenStreetMapでマップ上にマーカーを複数設置し ...
-
-
Lightboxで画像拡大時にダウンロードリンクを設置する方法
Lightboxで画像拡大時にダウンロードリンクを設置したいと要望を受けた。もち ...
-
-
ページ内のスクロールバーを見やすく且つ異なるブラウザ間でも同じデザインにする「SimpleBar」ライブラリの利用方法
CSSのoverflowでスクロールバーを設置した際、ブラウザによってデザイン( ...