Skip to main content
Olvidé poner la variable $mData al inicio del código PHP
Origen Enlace
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257
#Recogerá lo ocurrido a lo largo del código
$mData=array();

#Verificamos si se posteó un valor para el nombre y lo guardamos
$mName=!empty($_POST['nombre']) ? $_POST['nombre'] : NULL;

#Si no hay valor irá al último else
if ($mName) {
    #Sólo aquí requerimos la conexión
    require "conexion.php";
    #Verificamos si la conexión es válida
    if($conexion) {
        #Usamos consultas preparadas, para evitar Inyeccion SQL
        $sql="INSERT INTO formularios(nombre) VALUES (?)";
        #Verificamos que la consulta no sea errónea
        if ( $stmt=$conexion->prepare($sql) ) {
            #Pasamos el dato
            $stmt->bind_param("s",$mName);
            #Verificamos que no haya más errores, como clave duplicada en la BD, por ejemplo
            if ( $stmt->execute() ) {
                $mData["done"]="Se insertaron {$stmt->affected_rows} filas";
            } else {
                #Nótese que aquí se busca el error en $stmt
                $mData["fail"]=$stmt->error;
            }
        } else {
            $mData["fail"]=$conexion->error;
        }
    }else{
        $mData["fail"]="No hay conexión activa, revise las credenciales o la base de datos";
    }
} else {
    $mData["fail"]="No se postearon los datos. Revise el formulario o el código Javascript";
}

#El header es muy importante para estos casos
header("Content-type: application/json; charset=utf-8");
#Respondemos al cliente. OJO, esto es lo único que debe salir por pantalla
echo json_encode($mData);
#Verificamos si se posteó un valor para el nombre y lo guardamos
$mName=!empty($_POST['nombre']) ? $_POST['nombre'] : NULL;

#Si no hay valor irá al último else
if ($mName) {
    #Sólo aquí requerimos la conexión
    require "conexion.php";
    #Verificamos si la conexión es válida
    if($conexion) {
        #Usamos consultas preparadas, para evitar Inyeccion SQL
        $sql="INSERT INTO formularios(nombre) VALUES (?)";
        #Verificamos que la consulta no sea errónea
        if ( $stmt=$conexion->prepare($sql) ) {
            #Pasamos el dato
            $stmt->bind_param("s",$mName);
            #Verificamos que no haya más errores, como clave duplicada en la BD, por ejemplo
            if ( $stmt->execute() ) {
                $mData["done"]="Se insertaron {$stmt->affected_rows} filas";
            } else {
                #Nótese que aquí se busca el error en $stmt
                $mData["fail"]=$stmt->error;
            }
        } else {
            $mData["fail"]=$conexion->error;
        }
    }else{
        $mData["fail"]="No hay conexión activa, revise las credenciales o la base de datos";
    }
} else {
    $mData["fail"]="No se postearon los datos. Revise el formulario o el código Javascript";
}

#El header es muy importante para estos casos
header("Content-type: application/json; charset=utf-8");
#Respondemos al cliente. OJO, esto es lo único que debe salir por pantalla
echo json_encode($mData);
#Recogerá lo ocurrido a lo largo del código
$mData=array();

#Verificamos si se posteó un valor para el nombre y lo guardamos
$mName=!empty($_POST['nombre']) ? $_POST['nombre'] : NULL;

#Si no hay valor irá al último else
if ($mName) {
    #Sólo aquí requerimos la conexión
    require "conexion.php";
    #Verificamos si la conexión es válida
    if($conexion) {
        #Usamos consultas preparadas, para evitar Inyeccion SQL
        $sql="INSERT INTO formularios(nombre) VALUES (?)";
        #Verificamos que la consulta no sea errónea
        if ( $stmt=$conexion->prepare($sql) ) {
            #Pasamos el dato
            $stmt->bind_param("s",$mName);
            #Verificamos que no haya más errores, como clave duplicada en la BD, por ejemplo
            if ( $stmt->execute() ) {
                $mData["done"]="Se insertaron {$stmt->affected_rows} filas";
            } else {
                #Nótese que aquí se busca el error en $stmt
                $mData["fail"]=$stmt->error;
            }
        } else {
            $mData["fail"]=$conexion->error;
        }
    }else{
        $mData["fail"]="No hay conexión activa, revise las credenciales o la base de datos";
    }
} else {
    $mData["fail"]="No se postearon los datos. Revise el formulario o el código Javascript";
}

#El header es muy importante para estos casos
header("Content-type: application/json; charset=utf-8");
#Respondemos al cliente. OJO, esto es lo único que debe salir por pantalla
echo json_encode($mData);
se añadieron 5112 caracteres en el cuerpo
Origen Enlace
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257

#Código completo Te dejo un código completo, he implementado algunos cambios en las diversas partes, aplicando varias recomendaciones que sería largo de explicar al detalle. Si no entiendes algo pregunta, de todos modos iré comentando los cambios principales dentro del mismo código.

###HTML, Javascript/jQuery

Primeramente, usa una versión actualizada de la librería jQuery

<!-- Usar una versión reciente de jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

Este es el código que manejará el envío de datos al servidor

/* Se recomienda function() en lugar de document.ready */   
$(function() {  
    $( "#boton" ).click(function( e ) {
        /* Evita que la página se recargue */
        e.preventDefault();
        let datos=$('#formul').serialize();
        var url='guia.php';
        /*Creamos una variable, sólo por motivos de claridad*/
        var request = $.ajax({
            url: url,        /*Debe apuntar a la ruta exacta del archivo PHP*/
            method: "POST",  /*Aquí en código viejo se usaba type, debe usarse method*/
            data: datos,
            dataType: "json" /* Indica el tipo de dato que responderá el servidor */
        });
        
        /*Cuando la petición sea exitosa*/
        request.done(function(r) {
            console.log(r); /*Una simple prueba, borrarlo cuando todo funcione*/
            
            /*Aquí se verifica si hubo algún fallo en el servidor, buscando la clave fail en el JSON*/
            if (r.fail) {
                console.log (`ERROR! ${r.fail}`); /*Se puede actualizar el DOM*/
            } else {
                /*Si no hubo fallo, todo fue OK. Aquí pueden venir más datos, aparte de la clave done*/
                console.log (`OK! ${r.done}`);   /*Se puede actualizar el DOM*/
            }
        });
        
        /*Cuando la petición falle*/
        request.fail(function(jqXHR, textStatus) {
            /*En vez de un alert, se puede poner algo en un elemento del DOM*/
            alert(`La petición falló ${textStatus}`);
        });
    });
});

Este es el formulario, aquí no hay cambio:

<form method="post" id="formul">
<fieldset>
    <legend>Formulario de inicio</legend>
    <input type="text" name="nombre">
    <input type="submit" id="boton">
</fieldset>
</form>

##PHP Se ha creado un código totalmente controlado. Esto es imprescindible en la peticiones Ajax. El cliente espera una respuesta del servidor y por tanto debes controlar todo lo que pasa en el código, guardarlo en alguna parte y dar una respuesta adecuada.

Aquí se crea un array llamado $mData al cual le iremos agregando sea una clave fail, sea una clave done, según ocurra algún error o no, poniendo dentro el mensaje de error.

Si observas la petición Ajax más arriba, verás que en la respuesta hay un if (r.fail) que evaluará el JSON que respondió el servidor. He optado por responder un JSON porque es lo habitual, y porque permite mandar al cliente un objeto organizado, con claves/valores, para que haya un criterio claro a la hora de manejar la respuesta.

Otro parche importante que he añadido ha sido usar consultas preparadas para insertar el dato. Tu código actual es altamente vulnerable a ataques de Inyección SQL. Cuando puedas infórmate sobre ese tema, porque atañe seriamente a la seguridad de los datos y del sistema.

Otro aspecto MUY IMPORTANTE en tu código de servidor es que cuides bien lo que sale por pantalla con echo, print o con bloques HTML. Debe haber una sola salida por pantalla, que en este caso será el JSON, al final de todo.

#Verificamos si se posteó un valor para el nombre y lo guardamos
$mName=!empty($_POST['nombre']) ? $_POST['nombre'] : NULL;

#Si no hay valor irá al último else
if ($mName) {
    #Sólo aquí requerimos la conexión
    require "conexion.php";
    #Verificamos si la conexión es válida
    if($conexion) {
        #Usamos consultas preparadas, para evitar Inyeccion SQL
        $sql="INSERT INTO formularios(nombre) VALUES (?)";
        #Verificamos que la consulta no sea errónea
        if ( $stmt=$conexion->prepare($sql) ) {
            #Pasamos el dato
            $stmt->bind_param("s",$mName);
            #Verificamos que no haya más errores, como clave duplicada en la BD, por ejemplo
            if ( $stmt->execute() ) {
                $mData["done"]="Se insertaron {$stmt->affected_rows} filas";
            } else {
                #Nótese que aquí se busca el error en $stmt
                $mData["fail"]=$stmt->error;
            }
        } else {
            $mData["fail"]=$conexion->error;
        }
    }else{
        $mData["fail"]="No hay conexión activa, revise las credenciales o la base de datos";
    }
} else {
    $mData["fail"]="No se postearon los datos. Revise el formulario o el código Javascript";
}

#El header es muy importante para estos casos
header("Content-type: application/json; charset=utf-8");
#Respondemos al cliente. OJO, esto es lo único que debe salir por pantalla
echo json_encode($mData);

#Código completo Te dejo un código completo, he implementado algunos cambios en las diversas partes, aplicando varias recomendaciones que sería largo de explicar al detalle. Si no entiendes algo pregunta, de todos modos iré comentando los cambios principales dentro del mismo código.

###HTML, Javascript/jQuery

Primeramente, usa una versión actualizada de la librería jQuery

<!-- Usar una versión reciente de jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

Este es el código que manejará el envío de datos al servidor

/* Se recomienda function() en lugar de document.ready */   
$(function() {  
    $( "#boton" ).click(function( e ) {
        /* Evita que la página se recargue */
        e.preventDefault();
        let datos=$('#formul').serialize();
        var url='guia.php';
        /*Creamos una variable, sólo por motivos de claridad*/
        var request = $.ajax({
            url: url,        /*Debe apuntar a la ruta exacta del archivo PHP*/
            method: "POST",  /*Aquí en código viejo se usaba type, debe usarse method*/
            data: datos,
            dataType: "json" /* Indica el tipo de dato que responderá el servidor */
        });
        
        /*Cuando la petición sea exitosa*/
        request.done(function(r) {
            console.log(r); /*Una simple prueba, borrarlo cuando todo funcione*/
            
            /*Aquí se verifica si hubo algún fallo en el servidor, buscando la clave fail en el JSON*/
            if (r.fail) {
                console.log (`ERROR! ${r.fail}`); /*Se puede actualizar el DOM*/
            } else {
                /*Si no hubo fallo, todo fue OK. Aquí pueden venir más datos, aparte de la clave done*/
                console.log (`OK! ${r.done}`);   /*Se puede actualizar el DOM*/
            }
        });
        
        /*Cuando la petición falle*/
        request.fail(function(jqXHR, textStatus) {
            /*En vez de un alert, se puede poner algo en un elemento del DOM*/
            alert(`La petición falló ${textStatus}`);
        });
    });
});

Este es el formulario, aquí no hay cambio:

<form method="post" id="formul">
<fieldset>
    <legend>Formulario de inicio</legend>
    <input type="text" name="nombre">
    <input type="submit" id="boton">
</fieldset>
</form>

##PHP Se ha creado un código totalmente controlado. Esto es imprescindible en la peticiones Ajax. El cliente espera una respuesta del servidor y por tanto debes controlar todo lo que pasa en el código, guardarlo en alguna parte y dar una respuesta adecuada.

Aquí se crea un array llamado $mData al cual le iremos agregando sea una clave fail, sea una clave done, según ocurra algún error o no, poniendo dentro el mensaje de error.

Si observas la petición Ajax más arriba, verás que en la respuesta hay un if (r.fail) que evaluará el JSON que respondió el servidor. He optado por responder un JSON porque es lo habitual, y porque permite mandar al cliente un objeto organizado, con claves/valores, para que haya un criterio claro a la hora de manejar la respuesta.

Otro parche importante que he añadido ha sido usar consultas preparadas para insertar el dato. Tu código actual es altamente vulnerable a ataques de Inyección SQL. Cuando puedas infórmate sobre ese tema, porque atañe seriamente a la seguridad de los datos y del sistema.

Otro aspecto MUY IMPORTANTE en tu código de servidor es que cuides bien lo que sale por pantalla con echo, print o con bloques HTML. Debe haber una sola salida por pantalla, que en este caso será el JSON, al final de todo.

#Verificamos si se posteó un valor para el nombre y lo guardamos
$mName=!empty($_POST['nombre']) ? $_POST['nombre'] : NULL;

#Si no hay valor irá al último else
if ($mName) {
    #Sólo aquí requerimos la conexión
    require "conexion.php";
    #Verificamos si la conexión es válida
    if($conexion) {
        #Usamos consultas preparadas, para evitar Inyeccion SQL
        $sql="INSERT INTO formularios(nombre) VALUES (?)";
        #Verificamos que la consulta no sea errónea
        if ( $stmt=$conexion->prepare($sql) ) {
            #Pasamos el dato
            $stmt->bind_param("s",$mName);
            #Verificamos que no haya más errores, como clave duplicada en la BD, por ejemplo
            if ( $stmt->execute() ) {
                $mData["done"]="Se insertaron {$stmt->affected_rows} filas";
            } else {
                #Nótese que aquí se busca el error en $stmt
                $mData["fail"]=$stmt->error;
            }
        } else {
            $mData["fail"]=$conexion->error;
        }
    }else{
        $mData["fail"]="No hay conexión activa, revise las credenciales o la base de datos";
    }
} else {
    $mData["fail"]="No se postearon los datos. Revise el formulario o el código Javascript";
}

#El header es muy importante para estos casos
header("Content-type: application/json; charset=utf-8");
#Respondemos al cliente. OJO, esto es lo único que debe salir por pantalla
echo json_encode($mData);
Origen Enlace
A. Cedano
  • 95.2k
  • 31
  • 145
  • 257

Efectivamente, la mejor opción que existe hasta ahora para comunicar datos entre el cliente (HTML-Javascript) y el servidor (PHP-Base de datos), es Ajax. Porque, entre otras ventajas, permite llevar y traer datos entre cliente y servidor sin recargar la página, pudiendo actualizar cualquier cosa en el cliente o en el servidor. Para decirlo con una frase, Ajax es como una pasarela de datos entre cliente y servidor.

jQuery es una librería de Javascript, que tiene una sintaxis particular. Por ejemplo, jQuery usa mucho este signo $ para referirse a los elementos, y tiene formas particulares para alcanzar los elementos, por ejemplo, para alcanzar un elemento por su id, jQuery usa el símbolo # seguido del id del elemento.

jQuery es una librería amplísima, con la cual puedes hacer casi todo lo que hace Javascript, quizá por eso mucha gente confunde a jQuery con Javascript. Pero a pesar de su amplitud no deja de ser una librería, y para usarla debes incluir el archivo. Javascript por el contrario es nativo, viene con el navegador.

Creo que esto aclara un poco las dudas que planteas. Ahora con respecto a tu código, vamos a hacer que la petición funcione y a explicar algunas cosas más de paso.

Esta declaración es Javascript puro:

let boton=document.getELementById("boton");

Pero jQuery no te reconocerá ese elemento aquí:

$(boton).click(function(){

Porque la sintaxis de jQuery es diferente. Para que lo reconozca así, tendrías que ponerle el signo $ en la declaración:

let $boton=document.getELementById("boton");

Y aquí:

$boton.click(function(){

Pero, no hay por qué complicarse. Para este caso no conviene mezclar. Usa en todo la sintaxis de jQuery. De entrada, si sólo quieres escuchar los clicks del botón, no necesitas declararlo como variable. Haz simplemente esto:

$(document).ready(function(){
    $('#boton').click(function(){
        let datos=$('#formul').serialize();

Ahí alcanzará el botón por su id. De paso, corregimos también lo del formulario, que tampoco estaba siendo alcanzando por su id al faltarle # delante.

Pero falta algo muy importante para que la página no se recargue, lo cual hace perder la gracia que tiene Ajax. Esto se logra poniendo esta línea dentro de la función que escuchará el envío del formulario:

e.preventDefault();

El código quedaría entonces así:

$(document).ready(function(){
    $('#boton').click(function(e){
        e.preventDefault();
        let datos=$('#formul').serialize();
        //Resto del código

Ajax enviará lo que estás pasando en la variable datos al servidor y dentro del success te traerá en la variable r lo que el servidor haya respondido. Esto puede ser un HTML, un text, un JSON, etc. En el código PHP tú haces echo del resultado de query, pero esto devuelve TRUE o FALSE. Deberías quizá verificar si se insertaron filas y mandar un mensaje del tipo "Se insertaron n filas".

Ya está, con esas correcciones, tu código debería funcionar. Si la página se sigue recargando, cambia el input de envío por esto:

<button id="boton">Enviar</button>

Intenta haciendo esos cambios y si sigue sin funcionar dilo en comentarios. Si queda alguna duda también.

Espero te ayude a aclarar conceptos.