2-PHP-JS-Mandando datos fetch api-usando clases y metodos
En esta segunda parte, vamos a definir las clases y métodos para que la respuesta provenga de un método y así lograr una mejor estructura en nuestro código. Pondremos en marcha la siguiente estructura:
class Conexion
{
static public function conectar()
{
$link = new PDO("mysql:host=localhost;dbname==******", "", "");
return $link;
}
}
class CarpetaModel extends Conexion
{
public function guardarDatos2($datos2)
{
try {
} catch (PDOException $e) {
}
}
}
Codigo en el cliente:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulario</title>
<!-- Agrega las referencias a Bootstrap y SweetAlert2 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
</head>
<body>
<div class="container">
<br>
<form id="myForm2">
<div class="row align-items-center m-2">
<!-- Campos ocultos para enviar el id al servidor -->
<input type="hidden" name="id" value="<?php echo "17" ?>">
<div class="col-1">
<div class="form-group">
<button type="button" class="btn btn-success" id="guardarBtn2" onclick="guardarDatos2()">Guardar</button>
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="carpeta">Orden de aprehensión:</label>
<input type="date" class="form-control inputstl" name="O_aprehension" id="O_aprehension" placeholder="Carpeta Judicial" aria-invalid="true">
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="carpeta">Aprehensión:</label>
<div class="form-check">
<input class="form-check-input" type="radio" name="seleccion" id="giro" value="giro">
<label class="form-check-label" for="giro">
Giro
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="seleccion" id="nego" value="nego">
<label class="form-check-label" for="nego">
Nego
</label>
</div>
</div>
</div>
<div class="col-3">
<div class="form-group">
<label for="carpeta">Fecha de ejecución:</label>
<input type="date" class="form-control inputstl" name="F_ejecucion" id="F_ejecucion" aria-invalid="true">
</div>
</div>
</div>
</form>
</div>
<script>
function guardarDatos2() {
const datos = new FormData(document.getElementById('myForm2'));
// Obtener todos los elementos con el nombre 'seleccion'
var checkboxes = document.getElementsByName('seleccion');
// Inicializar la variable para almacenar la opción seleccionada
var seleccion = null;
// Iterar sobre los checkboxes y encontrar el que está marcado
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
seleccion = checkboxes[i].value;
break; // Salir del bucle si se encuentra una opción seleccionada
}
}
// Hacer algo con el valor (puedes imprimirlo en la consola por ahora)
console.log(datos.get('O_aprehension'))
console.log(datos.get('seleccion'));
console.log(datos.get('F_ejecucion'));
fetch('http://localhost/MVC-SITE-v5/EJERCICIOS-COMPONENTES/componentes/2-carpeta.php', {
method: 'POST',
body: datos,
})
.then(res => res.json())
.then(data => {
console.log("datos del servidor", data);
console.log("datos del servidor", data.status2);
console.log("datos del servidor", data.carpeta);
//data.status obtenemos el valor
if (data.status === 'Correcto2') {
// Mostrar una alerta SweetAlert2
Swal.fire({
icon: 'success',
title: 'Éxito',
text: 'Datos guardados exitosamente',
confirmButtonColor: '#3085d6',
});
}
});
// Deshabilitar el botón después de guardar los datos
document.getElementById('guardarBtn2').disabled = true;
// Deshabilitar el campo de entrada después de guardar los datos
document.getElementById('O_aprehension').disabled = true;
// Deshabilitar ambos checkboxes
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].disabled = true;
}
// Deshabilitar el campo de entrada después de guardar los datos
document.getElementById('F_ejecucion').disabled = true;
}
</script>
</body>
</html>
Codigo en el servidor:
<?php
class Conexion
{
static public function conectar()
{
$link = new PDO("mysql:host=localhost;dbname==******", "", "");
return $link;
}
}
class CarpetaModel extends Conexion
{
public function guardarDatos2($datos2)
{
try {
echo json_encode(array("status2" => "Correcto2", "carpeta" => $datos2));
} catch (PDOException $e) {
}
}
}
//Filtramos y realizamos una acciónif(isset($_POST['O_aprehension']) && isset($_POST['seleccion']) && isset($_POST['F_ejecucion'])) {
$datos2 =["id"=>$_POST['id'],
"O_aprehension"=>$_POST['O_aprehension'],
"seleccion"=>$_POST['seleccion'],
"F_ejecucion"=>$_POST['F_ejecucion'],
];
//echo json_encode(array("status2" => "Correcto2", "carpeta" => $datos2));
$carpetaModel = new CarpetaModel();
$carpetaModel->guardarDatos2($datos2);
}elseif($_POST['O_aprehension'] === ''){
echo json_encode(['mensaje' => 'Llena todos los campos']);
}
?>
Esta linea es la respuesta del servidor: echo json_encode(array("status2" => "Correcto2", "carpeta" => $datos2));
Comentarios
Publicar un comentario