Programación web: Php - Obteniendo datos en php enviados desde la API (Fetch) de Javascript

Muchas veces nos vemos en la necesidad de procesar información que se envía ya sea los datos de un nuevo producto para guardarlos o los datos de inicio de sesión o cualquier otra información que será procesada por el backend(PHP) y lo hacemos mediante javascript con su API Fetch para no refrescar la página donde estamos y hacer la página web mucho más rápida.

Bueno hoy vamos a aprender como recibir esa información para procesarla y devolver una respuesta al cliente (navegador)

Empezemos:

Supongamos que deseamos enviar los datos de un nuevo producto que deseamos agregar a nuestra base de datos.

Main.js

document.getElementById('btnSubmit').addEventListener('click', async e => {
e.preventDefault()
const result = await(await(fetch ('newProduct.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({name: document.getElementById('name').value, price: document.getElementById('price').value
})
)).json()
 console.log(result)
})

Ahora vamos a recibir y procesar esos datos con php

newProduct.php

<?php $datos= file_get_contents('php://input');
$datos = json_decode($datos);
$conn=mysqli_connect('localhost','root','','bdname');
$sql=mysqli_query($conn, 'insert into products(name,price) values($datos->name,$datos->price);
if($sql) echo json_encode('success'); else echo json_encode('error');
?>

Y así es como recibimos(una de muchas maneras) los datos en php enviados desde el cliente

Espero que hayan aprendido y nos vemos en otros post

Comenta y felicidad.