如何在 php 中接收 Fetch() POST？

Question

So i got this POST json method here , but can't understand how to get my json data

It's packed in BLOB which is packed in FormData

How to receive such POST in php? (and convert this FormData(Blob) back to json?)

JS

        const data = new FormData();
        const jsonBlob = new Blob([JSON.stringify(myJSON)], {type: "application/json"});
        data.append("data", jsonBlob);
        fetch(website,{
            method: "POST",
            body: data,
        }).then(resp=>{
            if(!resp.ok){
                const err = new Error("Error response");
                err.resp = resp;
                throw err;
            }
            console.log("OK");
        }).catch(err =>{
            console.error(err);
        })

I'm big noobo, so i can't even receive it

Seems like it works differently with fetch()

PHP

if(isset($_POST['data'])){

}

Answer 1

The simpliest way to send a JSON to server is to simply send it as the POST request body. There is no need to wrap it like a file. For example,

var myJSON = {
    hello: 'world',
    foo: 'bar',
};
fetch(website, {
    method: "POST",
    body: JSON.stringify(myJSON),
})

On server side, your message will be readable through the "php://input" stream . You can read it like an ordinary file:

$request_raw = file_get_contents('php://input');
$json_object = json_decode($request_raw);

You can save the below code as a PHP file and test it yourself. On load, it would send itself another POST reqeust, parse it as key-value pairs, return it to your browser and show it:

<?php

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
        $request_raw = file_get_contents('php://input');
        $request = json_decode($request_raw);
        foreach ($request as $key => $value) {
                echo "{$key}: {$value}\n";
        }
        exit;
}

?>
<div id="result"></div>
<script>
var myJSON = {
    hello: 'world',
    foo: 'bar',
};
const data = new FormData();
fetch(document.location.href, {
    method: "POST",
    body: JSON.stringify(myJSON),
}).then(resp => {
    if(!resp.ok){
        const err = new Error("Error response");
        err.resp = resp;
        throw err;
    }
    console.log("OK");
    return resp.text();
}).catch(err =>{
    console.error(err);
}).then(body => {
    document.getElementById('result').innerText = body;
});
</script>