JSからJSON形式のデータをfetchで投げてPHPで受け取り、PHPから返してJSで受け取る方法

JavaScriptからPHPに対してJSON形式のデータをfetch通信でリクエストし、PHP側で何らかの処理をした後、JavaScriptに返したい。よくやる処理ではあるんだけどまとめていなかったのでメモ。

ソースコード

JavaScript側

const url = 'https://test.com/';
const data = {id: 1, name: '山田'};

fetch(url, {
    method: 'POST',
    body: JSON.stringify(data)
})
.then( (response) => {
    if (!response.ok) {
        throw new Error(response.status);
    }
    return response.json();
})
.then( (result) => {
    // 何らかの処理
})
.catch((error) => {
    console.error(`error: ${error}`);
});

PHP側

<?php
$data = json_decode(file_get_contents('php://input'), true);

// 何らかの処理

$result = [
    'status' => 'success',
];

header('Content-Type: application/json; charset=utf-8');
echo json_encode($result);
exit();

注意点

JSONで出力する際、キーにIDとかを入れると昇順でソートされる点に注意。並び順を指定したいような場合はPHP側でキーに何もいれない（0から割り当てていく）のが良いかと思う。IDをデータに含めたい場合はvalue側に入れること。

その他

GETでリクエストしたい場合

JavaScript側は以下で送信して、PHP側は「$_GET」で受け取るだけ。

// GET送信の場合
const data = new URLSearchParams({
    id: 1, 
    name: '山田'
});
const url = `https://test.com/?${data.toString()}`;
fetch(url, {})
.then( (response) => {
    if (!response.ok) {
        throw new Error(response.status);
    }
    return response.json();
})
.then( (result) => {
    // 何らかの処理
})
.catch((error) => {
    console.error(`error: ${error}`);
});

PHP間でデータを送受信したい場合

PHP間でデータを送受信したい場合は過去記事を参照。