1-fetch api y php
¿Alguna vez te has preguntado cómo funcionan las interacciones en tiempo real en la web? ¡Hoy te invitamos a sumergirte en el fascinante mundo de la programación con un ejemplo práctico! En este post, te guiaremos a través de un sencillo formulario web que utiliza Fetch API y PHP para enviar y recibir datos entre el cliente y el servidor.
1. Comenzando con el Formulario:
Imagina que estás construyendo una aplicación que requiere guardar información en un servidor. En nuestro caso, hemos creado un formulario simple con un campo para la "Carpeta de Investigación". Pero, ¿cómo enviamos estos datos al servidor de manera eficiente?
//*************************Clienten*********************************
<body>
<div class="container">
<form id="myForm">
<div class="row">
<div class="col-3">
<div class="form-group">
<label for="carpeta">Carpeta de investigación:</label>
<input type="text" class="form-control inputstl"
name="carpeta" id="carpeta" placeholder="Carpeta Judicial" aria-invalid="true">
</div>
</div>
<!-- Campos ocultos para enviar el id al servidor -->
<input type="hidden" name="id" value="<?php echo "17" ?>">
<div class="col-2">
<div class="form-group">
<button type="submit" class="btn btn-success"
id="guardarBtn" >Guardar</button>
</div>
</div>
</div>
</form>
</div>
<!--
2. La Magia de Fetch API:
En el lado del cliente, hemos utilizado JavaScript para capturar los datos del formulario y enviarlos al servidor mediante Fetch API. Observa cómo se realiza esta operación:
-->
<script>
var formulario = document.getElementById('myForm');
formulario.addEventListener('submit', function(e){
e.preventDefault();
console.log('me diste un click')
var datos = new FormData(formulario);
console.log(datos.get('carpeta'))
console.log(datos.get('id'))
fetch('http://localhost/MVC-SITE-v5/EJERCICIOS-COMPONENTES/1-carpeta.php', {
method: 'POST',
body: datos,
})
.then(res => res.json())
.then(data => {
console.log(data);
});
})
</script>
</body>
</html>
3. En el Servidor con PHP:
En el servidor, hemos creado un script en PHP (1-carpeta.php) para recibir los datos, procesarlos y enviar una respuesta en formato JSON.
//*******************Servidor********************************
<?php
if(isset($_POST['carpeta'])){
$carpeta=$_POST['carpeta'];
if($carpeta === '' ){
echo json_encode(['mensaje' => 'Llena todos los campos']);
}else{
echo json_encode(['mensaje' => 'Correcto', 'carpeta' => $carpeta]);
}
}else {
// La variable es null o no está definida
// Puedes realizar acciones alternativas aquí
echo json_encode(['mensaje' => 'Llena todos los campos']);
}
?>
¡Despierta tu Curiosidad!
Este ejemplo simple es solo la punta del iceberg. La combinación de Fetch API y PHP abre un mundo de posibilidades para construir aplicaciones web interactivas y eficientes. ¿Te gustaría explorar más? ¡Anímate a aprender a programar y descubre el poder que tienes en tus manos para dar vida a tus ideas en la web!
¡Esperamos que este post haya despertado tu curiosidad y te inspire a sumergirte en el emocionante viaje de la programación! ¿Tienes alguna pregunta o algo que quieras explorar más a fondo? ¡Déjanos tus comentarios!
echo json_encode(['mensaje' => 'Correcto', 'carpeta' => $carpeta]);
Esta línea de código está utilizando la función json_encode en PHP para convertir un array asociativo en formato JSON. Vamos a desglosarla:
['mensaje' => 'Correcto', 'carpeta' => $carpeta]: Esto es un array asociativo en PHP. En este caso, el array tiene dos elementos clave-valor:
'mensaje' => 'Correcto': La clave 'mensaje' tiene el valor 'Correcto'.
'carpeta' => $carpeta: La clave 'carpeta' tiene el valor de la variable $carpeta, que es el valor que recibiste del formulario.
json_encode([...]): La función json_encode toma un array en PHP y lo convierte en una cadena de texto en formato JSON. En este caso, convierte el array asociativo en una cadena JSON.
echo: Finalmente, echo se utiliza para imprimir la cadena JSON resultante y enviarla de vuelta como respuesta al cliente que hizo la solicitud al servidor.
Entonces, cuando el cliente envía datos al servidor a través de Fetch API, si la carpeta no está vacía, el servidor responde con un JSON que indica que la operación fue exitosa y también incluye el valor de la carpeta que se recibió. Este JSON puede ser procesado fácilmente en el lado del cliente para realizar acciones adicionales según sea necesario.
Tambien puedes encentrarla de la siguiente manera:
echo json_encode(array("status" => "Correcto", "carpeta" => $carpeta));
Esta línea es esencialmente similar a la anterior, con algunas diferencias notables:
Uso de array en lugar de []: En PHP, ambas notaciones ([] y array()) se utilizan para crear arrays. La diferencia principal radica en la versión de PHP que estás utilizando. La notación [] es una sintaxis más reciente y está disponible en PHP 5.4 y versiones posteriores. La notación array() es más antigua y es compatible con versiones anteriores de PHP. En tu caso, estás usando la notación más antigua array().
Clave 'status' en lugar de 'mensaje': La primera línea que discutimos anteriormente utiliza la clave 'mensaje' para indicar el estado de la operación. En esta línea, se utiliza la clave 'status' en su lugar. La elección de la clave es semántica y depende de cómo prefieras estructurar tu JSON. En términos prácticos, no hay diferencia real; ambos ejemplos están enviando un mensaje de estado exitoso.
Entonces, básicamente, ambas líneas cumplen la misma función: tomar un array asociativo, convertirlo a formato JSON utilizando json_encode, e imprimir esa cadena JSON de vuelta al cliente. La elección entre [] y array() y las claves específicas (ya sea 'mensaje' o 'status') es más una cuestión de estilo y preferencia.
Comentarios
Publicar un comentario