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>
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 usartry ... catch
, debes controlar el flujo del código emitiendo errores apropiados en cada caso.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.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á elis_int
aquí:elseif ($edad == '' || !is_int($edad))
. Además, tienes un espacio de más al evaluar el$nombre
, lo cual te fastidiará si usastrim
, lo cual por cierto deberías hacer.connect_errno
ni historias... cuando no hay conexión el objeto es nulo, por tanto con hacer unif ($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...