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.