1

estoy intentando enviar desde unos formularios html por medio de js a php para luego agregarlos a la base de datos, los datos se estan enviado sin embargo, php no esta recibiendo los datos para insertarlos

js recoge los datos del formulario html, a la vez que limpia y valide que el usuario no inserte datos, o espacios, se hace una peticion por la cual prepara los datos para enviarlos a la ruta indicada peticion.open('POST', 'php/insertar-usuario.php'); por el metodo post y al final las funciones se ejecutan enviando los datos por peticion.send(parametros);

JS

const btn_cargar = document.getElementById('btn_cargar_usuarios'),
    error_box = document.getElementById('error_box'),
    tabla = document.getElementById('tabla'),
    loader = document.getElementById('loader');

let usuario_nombre,
    usuario_edad,
    usuario_pais,
    usuario_correo;

function agregarUsuarios(e) {
    e.preventDefault();

    var peticion = new XMLHttpRequest();
    peticion.open('POST', 'php/insertar-usuario.php');
    
    usuario_nombre = formulario.nombre.value.trim();
    usuario_edad = parseInt(formulario.edad.value.trim());
    usuario_pais = formulario.pais.value.trim();
    usuario_correo = formulario.correo.value.trim();

    if (formulario_valido()){
        //error_box.classList.remove('active');
        
        var parametros = 'nombre='+ usuario_nombre + '&edad=' + usuario_edad + '&pais=' + usuario_pais + '&correo=' + usuario_correo;
        
        peticion.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        
        //loader.classList.add('active');

        peticion.onload = function() {
            cargarUsuarios();
            formulario.nombre.value ='';
            formulario.edad.value ='';
            formulario.pais.value ='';
            formulario.correo.value ='';
        }

        peticion.onreadystatechange = function() { // funcion la cual compruenba si la peticion fue correcta
            if (peticion.readyState == 4 && peticion.status == 200)
                loader.classList.remove('active');
        }

        peticion.send(parametros); //envio de datos al archivo PHP

    }else{
        error_box.classList.add('active');
        error_box.innerHTML = 'Por favor completa el formulario correctamente';
    }

}

formulario.addEventListener('submit', function(e) {
    agregarUsuarios(e);    
})

function formulario_valido() {
    if(usuario_nombre == '')
        return false;
    else if(isNaN(usuario_edad))
        return false;
    else if(usuario_pais == '')
        return false;
    else if(usuario_correo == '')
        return false;

    return true;
}

php recibe los datos de js y los asigna a las variables igualmente hace otra comprobación, si todo esta bien continua con la inserción a la base de datos, sim embargo no esta recibiendo los datos lo cual retorna el array $respuesta = ['error' => true]; en la consola del navegador.

PHP

<?php

//error_reporting(0);
//header('Content-type: application/json;charset=utf-8');

$nombre = $_POST['nombre'];
$edad = $_POST['edad'];
$pais = $_POST['pais'];
$correo = $_POST['correo'];

function validarDatos($nombre, $edad, $pais, $correo){
    if ($nombre == ' ')
        return false;
    elseif ($edad == '' || !is_int($edad))
        return false;
    elseif ($pais == '')
        return false;
    elseif ($correo == '')
        return false;

    return true;
}

if (validarDatos($nombre, $edad, $pais, $correo)) {
    try {
        $conexion = new mysqli('localhost' , 'root', '', 'curso_php_ajax');
        $conexion->set_charset('utf8');
        
        $statement = $conexion->prepare("INSERT INTO usuarios (nombre, edad, pais, correo) VALUES(?,?,?,?)");
        $statement->bind_param("siss", $nombre ,$edad, $pais, $correo);
        $statement->execute();
            
        if ($conexion->affected_rows <= 0) {
            $respuesta = [
                'error'=> true
            ];
        }
        $respuesta = [];
    } catch (\Exception $e) {
        $respuesta = [
            'error' => true
        ];
    }

}else {
    $respuesta = [
        'error' => true
    ];
}
echo json_encode($respuesta);

agradezco mucho la ayuda y la explicación.

PD:el codigo html por si lo necesitan para hacer las pruebas, les pasaria el css pero el sistema me pide que escriba mas.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabla de usuarios con AJAX</title>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="cssd/estilos.css">
</head>
<body>
    <div class="contenedor">
        <header>
            <h1>Tabla de Usuarios</h1>
            <div>
                <button id="btn_cargar_usuarios" class="btn active">Cargar Usuarios</button>
            </div>
        </header>
        <main>
            <form action="" method="" id="formulario" class="formulario">
                <input type="text" name="nombre" id="nombre" placeholder="Nombre">
                <input type="text" name="edad" id="edad" placeholder="Edad">
                <input type="text" name="pais" id="pais" placeholder="Pais">
                <input type="email" name="correo" id="correo" placeholder="Correo">
                <button type="submit" class="btn">Agregar</button>
            </form>
            <div class="error_box" id="error_box">
                <p>Se ha producido un error.</p>
            </div>
            <table id="tabla" class="tabla">
                <tr>
                    <th>ID</th>
                    <th>Nombre</th>
                    <th>Edad</th>
                    <th>Pais</th>
                    <th>Correo</th>
                </tr>
            </table>
            <div class="loader" id="loader"></div>
        </main>
    </div>
    <script src="js/main.js"></script>
</body>
</html>
5
  • ¿Si pones un alert(parametros); ves los datos correctamente? Por otra parte, intenta poner un mensaje específico en $respuesta para saber si falla la inserción en sí misma u otra cosa, por cierto, mysqli no levanta Excepciones, por lo que no tiene sentido usar try ... catch, debes controlar el flujo del código emitiendo errores apropiados en cada caso.
    – A. Cedano
    Commented el 18 jun. 2022 a las 16:52
  • para lo del try catch intente con el $conexion->connect_errno pero no me funciono, por otro lado js parece que si envía los datos pero php no los toma no se por que.
    – Reina
    Commented el 18 jun. 2022 a las 17:04
  • Veo también dos problemas en tu función validar. Debes forzar una conversión a entero cuando recoges la edad, algo así: $edad=(int) $_POST["edad"];, considera que los datos se postean como cadena, así, si la edad es 22 años, se mandará esto: "22", y la validación no pasará el is_int aquí: elseif ($edad == '' || !is_int($edad)). Además, tienes un espacio de más al evaluar el $nombre, lo cual te fastidiará si usas trim, lo cual por cierto deberías hacer.
    – A. Cedano
    Commented el 18 jun. 2022 a las 17:07
  • No necesitas usar connect_errno ni historias... cuando no hay conexión el objeto es nulo, por tanto con hacer un if ($conexion) { //Hay conexion, proceder } else { //no hay conexión, emitir error} es suficiente. A eso me refiero con controlar el flujo, y lo mismo debes evaluar el prepare y el execute por lo dicho, mysqli no levanta Excepciones en ningún caso...
    – A. Cedano
    Commented el 18 jun. 2022 a las 17:09
  • forcé el error de poner el usuario de la base mal para que fallara la conexión pero no asigna el error directamente lo bota, ya corregí los otros errores del nombre y sobre la edad, pero no recibe los datos igual
    – Reina
    Commented el 18 jun. 2022 a las 18:14

1 respuesta 1

0

Veo varios problemas:

  1. Debes forzar una conversión a entero en la $edad o no pasará el is_int()
  2. Mysqli no levanta Excepciones, debes controlar el flujo de tu código evaluando todo lo que pueda fallar.
  3. Considera poner una descripción en cada caso para saber lo que ha ocurrido. Esto puede servirte también para informar al usuario.
  4. Considera usar trim y quita el espacio de más al evaluar $nombre.
  5. Considera usar ternarios o fusión de null, o podrás tener derecho a advertencias de Undefined index

Así debería funcionar, espero no haber errado en nada:

$nombre = trim($_POST['nombre']) ?? null;
$edad = (int) $_POST['edad']     ?? null;
$pais = trim($_POST['pais'])     ?? null;
$correo = trim($_POST['correo']) ?? null;

function validarDatos($nombre, $edad, $pais, $correo){
    if ($nombre == '')
        return false;
    elseif ($edad == '' || !is_int($edad))
        return false;
    elseif ($pais == '')
        return false;
    elseif ($correo == '')
        return false;

    return true;
}

if (validarDatos($nombre, $edad, $pais, $correo)) {
    $conexion = new mysqli('localhost' , 'root', '', 'curso_php_ajax');
    if ($conexion) {
        $conexion->set_charset('utf8'); 
        $sql="INSERT INTO usuarios (nombre, edad, pais, correo) VALUES(?,?,?,?)";       
        if ($statement = $conexion->prepare($sql)) {
            $statement->bind_param("siss", $nombre ,$edad, $pais, $correo);
            if($statement->execute() && $conexion->affected_rows > 0) {
                $respuesta=array('error'=>false, 'msg'=>'Filas insertadas: '.$conexion->affected_rows);
            } else {
                $respuesta=array('error'=>true, 'msg'=>'Error ejecutando o no filas afectadas');
            }
        } else {
            $respuesta=array('error'=>true, 'msg'=>'No se preparó la consulta'=;
        }
    } else {
        $respuesta=array('error'=>true, 'msg'=>'Conexión no válida');
    }
} else {
    $respuesta=array('error'=>true, 'msg'=>'Datos no válidos');
}
        
echo json_encode($respuesta);

El último bloque es más largo, pero, debes hacerlo así, dado que mysqli no levante Excepciones, y tu tarea debe ser prever todo lo que puede salir mal y controlarlo.

Prueba, y si da error, dinos por dónde entra el código para revisar con más certeza.

3
  • if($statement->execute() && $conexion->affected_rows > 0) en este if que estas preguntando?
    – Reina
    Commented el 18 jun. 2022 a las 18:36
  • probe el codigo y si funciona sin embargo se esta atascando en una linea retorn el siguiente error Warning: Undefined array key "edad" in C:\xampp\htdocs\AJAX\php\insertar-usuario.php on line 7
    – Reina
    Commented el 18 jun. 2022 a las 18:41
  • @Reina en if($statement->execute() && $conexion->affected_rows > 0) estoy preguntando dos cosas: Si el execute() no es erróneo y si hubo filas afectadas en la consulta. Lo del Undefined array_key es extraño. Cambia temporalmente el echo json_encode($respuesta); por esto, echo json_encode($_POST); y dime qué ves en consola, así podrás examinar la estructura del POST.
    – A. Cedano
    Commented el 18 jun. 2022 a las 22:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.