1-PHP-JS-Mandando datos fetch-1-cargando datos

 <!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="myForm5">
        <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="guardarBtn5" onclick="guardarDatos5()">Guardar</button>
                </div>
            </div>
            <div class="col-2">
                <div class="form-group">
                    <label for="carpeta">APELACIÓN:</label>
                    <input type="text" class="form-control inputstl" name="apelacion" id="apelacion" placeholder="Carpeta Judicial" aria-invalid="true">
                </div>
            </div>
            <div class="col-2">
                <div class="form-group">
                    <label for="carpeta">DENEGADA:</label>
                    <input type="text" class="form-control inputstl" name="denegada" id="denegada" placeholder="Carpeta Judicial" aria-invalid="true">
                </div>
            </div>
            <div class="col-2">
                <div class="form-group">
                    <label for="carpeta">AMPARO:</label>
                    <input type="text" class="form-control inputstl" name="amparo" id="amparo" placeholder="Carpeta Judicial" aria-invalid="true">
                </div>
            </div>
            <div class="col-4">
            <label for="carpeta">Seleccione tipo de resolución:</label>
                <select class="form-select" aria-label="Default select example" name="resolucion" id="resolucion">
                <option selected>Resolvio</option>
                <option value="Confirmo">CONFIRMO</option>
                <option value="Modificado">MODIFICADO</option>
                <option value="Revocada">REVOCADA</option>
                <option value="Amparada">AMPARADA</option>
                <option value="Negada">NEGADA</option>
                </select>
                </div>
            </div>
        </div>
    </form>
</div>

<script>
    function guardarDatos5() {
        const datos = new FormData(document.getElementById('myForm5'));
        // Hacer algo con el valor (puedes imprimirlo en la consola por ahora)
        console.log(datos.get('apelacion'))
        console.log(datos.get('denegada'));
        console.log(datos.get('amparo'));
        console.log(datos.get('resolucion'));
        fetch('http://localhost/MVC-SITE-v5/EJERCICIOS-COMPONENTES/componentes/5-carpeta.php', {
                method: 'POST',
                body: datos,
   
        })
            .then(res => res.json())
            .then(data => {
                console.log("datos del servidor", data);
                console.log("datos del servidor", data.status5);
                console.log("datos del servidor", data.carpeta);
            // Cambia a data.info o data.O_aprehension según lo que esté en el servidor
                //data.status obtenemos el valor
                if (data.status === 'Correcto5') {
                   
                    // 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('guardarBtn5').disabled = true;
            // Deshabilitar el campo de entrada después de guardar los datos
            document.getElementById('apelacion').disabled = true;
            // Deshabilitar el campo de entrada después de guardar los datos
            document.getElementById('denegada').disabled = true;
            // Deshabilitar el campo de entrada después de guardar los datos
            document.getElementById('amparo').disabled = true;
            // Deshabilitar el campo de entrada después de guardar los datos
            document.getElementById('resolucion').disabled = true;
    }
    cargarDatos();

function cargarDatos() {  
    let id="17";
    fetch(`http://localhost/MVC-SITE-v5/EJERCICIOS-COMPONENTES/componentes/5-carpeta.php`)
    .then(response => response.json())
    .then(data => {
        console.log("resultado",data.result);

    })
    .catch(error => {
        console.error('Error:', error);
    });
}

</script>


</body>
</html>

Servidor:

<?php class Conexion { static public function conectar() { $link = new PDO("mysql:host=localhost;dbname=dbaudiencias", "root", ""); return $link; } } class CarpetaModel extends Conexion { public function guardarDatos5($datos5) { try { //Actualizar datos $stmt = Conexion::conectar()->prepare("UPDATE carpetas SET apelacion=:apelacion,denegada=:denegada,amparo=:amparo,resolucion=:resolucion WHERE id=:id"); $stmt->bindParam(":id", $datos5['id'], PDO::PARAM_STR); $stmt->bindParam(":apelacion", $datos5['apelacion'], PDO::PARAM_STR); $stmt->bindParam(":denegada", $datos5['denegada'], PDO::PARAM_STR); $stmt->bindParam(":amparo", $datos5['amparo'], PDO::PARAM_STR); $stmt->bindParam(":resolucion", $datos5['resolucion'], PDO::PARAM_STR); if ($stmt->execute()) { // ¡Datos guardados con éxito! Vamos a informar al cliente. echo json_encode(array("status5" => "Correcto5")); } else { http_response_code(500); echo json_encode(array("status5" => "error", "message" => "Error al ejecutar la consulta")); } } catch (PDOException $e) { } } public function obtenerDatos($id) { try { echo json_encode(array("result" => "Correcto5")); } catch (PDOException $e) { http_response_code(500); echo json_encode(array("status" => "error", "message" => $e->getMessage())); } } } if(isset($_POST['apelacion']) && isset($_POST['denegada']) && isset($_POST['amparo']) && isset($_POST['resolucion'])) { $datos5 =["id"=>$_POST['id'], "apelacion"=>$_POST['apelacion'], "denegada"=>$_POST['denegada'], "amparo"=>$_POST['amparo'], "resolucion"=>$_POST['resolucion'] ]; //Testeo:echo json_encode(array("status2" => "Correcto2", "carpeta" => $datos2)); $carpetaModel = new CarpetaModel(); $carpetaModel->guardarDatos5($datos5); } echo json_encode(array("result" => "Correcto5")); //$carpetaModel = new CarpetaModel(); //$id="17"; //$carpetaModel->obtenerDatos($id); ?>

Comentarios

Entradas populares de este blog

Filtrando por fecha

10 videojuegos gratis para aprender JavaScript en línea

reloj obs---datetime.lua