0

El objetivo de esta práctica consiste en que el usuario debe introducir los datos en un pequeño formulario, el cual desde desde JavaScript utilizando ajax, cogerá y los enviará al archivo php el cual se encarga de realizarla conexión con la base de datos de MySQL (en mi caso con XAMPP) y insertarlos en su respectiva tabla. El problema está en que cuando relleno los datos y los envío, no se introducen en la base de datos ni tampoco me dice nada por consola, entonces quería saber como solucionar el fallo. Gracias de antemano.

Código HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form method="POST" id="info">
        <p>Nombre:</p>
        <input type="name" name="nombre" id="nombre">
        <p>Correo:</p>
        <input type="email" name="correo" id="correo">
        <p>Tlf:</p>
        <input type="tel" name="tlf" id="tlf">
        <br><br>
        <input type="submit" id="enviar" value="Enviar">
    </form>
<script src="conexion.js"></script>
</body>
</html>

Código JavaScript (JQuery):

$( document )
.ready( function ( ) {
    $( "#enviar" )
    .click( function ( ) {
        $.ajax( {
            url: "insertar.php",
            method: "POST",
            headers: {
                'Access-Control-Allow-Origin': '*'
            },
            data: $( "#info" ).serialize( ),
            success: function ( respuesta ) {
                alert( "Perfecto, los datos se han enviado correctamente!" );
            }
        } );
    } );
} );

Código PHP:

<?php

$servidor = "localhost";
$usuario = "root";
$contra = "";
$db = "formulario";

$conexion = mysqli_connect($servidor,$usuario,$contra,$db);

if(mysqli_connect_errno()){
    echo "Error en la conexión";
    exit();
}

echo "Conexión establecida correctamente.";

$nombre = $_POST['nombre'];
$correo = $_POST['correo'];
$tlf = $_POST['tlf'];

$sql = "INSERT into usuarios (nombre,correo,tlf) values ('$nombre','$correo','$tlf')";
echo mysqli_query($conexion,$sql);

?>
6
  • Ni en javascript ni en PHP muestra ninguno de los mensajes anteriormente descritos en el código? (a propósito... la cabecera Access-Control-Allow-Origin es una cabecera de respuesta, no tiene ningún sentido enviarla al servidor en la petición)
    – Pipe
    Commented el 4 may. 2021 a las 22:20
  • A ver @Pipe, primero que nada, si no pongo el headers: {'Access-Control-Allow-Origin': '*' }, me salta el error del CORS, y segundo, no me muestra ningún mensaje al ejecutarse, por lo que no se donde puede estar el problema.
    – ShadowZ
    Commented el 4 may. 2021 a las 22:45
  • Error de CORS solo le debería salir si está accediendo a otro dominio (pero según su ejemplo solo accede a insertar.php lo que da a entender que es el mismo dominio), y el que elige que dominios permitir y que dominios no es el servidor, no el cliente. Si el cliente lo eligiera, no tendría ningún sentido, porque entonces el cliente podría elegir consultar cualquier dominio y ya.
    – Pipe
    Commented el 4 may. 2021 a las 23:17
  • Sin un error es muy complicado ayudar porque el error puede estar en mil partes. Que retorna el servidor si inspecciona la respuesta por developer tools -> network? Asegurese de tener esto en el PHP para asegurarnos que está mostrando todos los posibles errores en el servidor: ini_set('display_errors', 1); ini_set('display_startup_errors', 1); error_reporting(E_ALL);
    – Pipe
    Commented el 4 may. 2021 a las 23:28
  • Cuando lo lanzo con el Live Server de visual studio code, me salta http error 405 y por consola me muestra: crbug/1173575, non-JS module files deprecated. Pero cuando lo abro en local, sin ningún live server, no me muestra nada.
    – ShadowZ
    Commented el 5 may. 2021 a las 9:38

1 respuesta 1

0

Modifica

 <form method="POST" id="info"> a  
 <form method="POST" action="" id="info">

 $( "#enviar" ).click( function ( ) { a 
 $( "#info" ).submit( function (e) {
    e.preventDefault();

Elimina

headers: {
 'Access-Control-Allow-Origin': '*'
},

Cuando le des en enviar debes tener el devtool del navegador abierdo en la sección "red" allí debe mostrarte el listado de peticiones y por su puesto la petición a insertar.php, si no aparece, tu error esta en JS, si te aparece la petición revisa que te este respondiendo cualquier echo puesto allí, también revisa que la ruta sea exactamente esa, según lo que veo, el archivo JS de la petición se encuentra en la misma ruta que el .php

OJO: Al modificar las cabeceras que se envían, estas deben coincidir con las que responde "insertar.php", por tanto es mejor eliminarlo.

Siempre debes empezar con la estructura más simple y básica que se pueda, cuando funcione, vas adicionando el resto.

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.