¿Cómo insertar datos en la base de datos mediante Ajax y jQuery?

publicado por: Anonymous

Estoy tomando base de una la pregunta

¿Cómo enviar los datos que alamacena una variable en jQuery mediante AJAX a un PHP y guardar en la base de datos con MySQLi?

Pero el problema es que para mis datos no me funciona.

Estoy haciendo una página en el que un estudiante ingresa con el usuario y contraseña, el usuario queda almacenado hasta que cierra sesión, por ende todo lo que haga dentro queda con su usuario.

Lo que estoy tratando de hacer es poner una pregunta y que ellos elijan una de las 5 opciones, y que apenas elijan la opción lo suba automáticamente a la base de datos.

Aquí el código de lo que estoy tratando de hacer

1) Las opciones de pregunta que vienen en example.php junto con el array POST

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

LA CAPITAL DE ESPAÑA ES:

Barcelona: <input type="radio" id="p1" name="n1" value="Opción 1"><br>
Atenas: <input type="radio" id="p2" name="n2" value="Opción 2"><br>
Berlin: <input type="radio" id="p3" name="n3" value="Opción 3"><br>
Madrid: <input type="radio" id="p4" name="n4" value="Opción 4"><br>
Bogota: <input type="radio" id="p5" name="n4" value="Opción 4"><br>

Acá la parte del array POST

<script type="text/javascript">
$(function() {
          $(':radio').click(function() {
            $(':radio').prop("disabled", true);
            valor= $(this).val();
            /*Desde aquí se invoca la función que agrega a la BD
              y se pasa el valor del radio seleccionado
              Ejemplo: agregarDatos(valor);*/
            //agregarDatos(valor);
            console.log("Aquí se envía a la base de datos el valor de : "+valor); 
        });

        //console.log(datos);

        function agregarDatos(valor)
            { 
            //console.log("Aquí envías a la BD: "+valor); 
            /*Desde esta función se puede implementar una llamada a Ajax 
                que enviará la información del radio seleccionado a la BD*/ 

            /*La petición Ajax sería algo así*/ 
            usuario= '<?php echo $_SESSION["usuario"]; ?>'; 
            datos={usuario: usuario, respuesta: valor}; 
            console.log(datos); 

            /*comentado temporalmente*/
            var request = $.ajax({ 
                url: "agregar.php", //Archivo de servidor que inserta en la BD 
                method: "POST", 
                data: datos, 
                dataType: "json" 
            }); 

            request.done(function( data ) { 
                console.log("Se agregaron los datos: "+data); 
            }); 

            request.fail(function( jqXHR, textStatus ) { 
                alert( "Error petición Ajax: " + textStatus ); 
            }); 
            }
        });

    </script>

2) En agregar.php viene la conexión a la base de datos

<?php 

if (isset($_POST['usuario']) && !empty($_POST['usuario']) && isset($_POST['respuesta']) && !empty($_POST['respuesta'])) 
    {
    $usuario = $_POST['usuario'];
    $respuesta = implode(', ', $_POST['respuesta']);

    //Datos de conexión a la base de datos
    $host       = "localhost";
    $usuario    = "root";
    $clave      = "";
    $basedatos  = "evaluacion";
    $tabla      = "pregunta";

    // Conectar a la base
    //  la variable $myslqi contendrá el objeto con la conexión
    $mysqli = mysqli_connect($host, $usuario, $clave, $basedatos);
    if (mysqli_connect_errno($mysqli)) 
        {
        die( "Error al conectar a MySQL: " . mysqli_connect_error() );
        }

    // insert en la base
    $sentencia = $mysqli->prepare("INSERT INTO $tabla (usuario, respuesta) VALUES (?, ?)");
    $sentencia->bind_param("is", $usuario, $respuesta );
    $sentencia->execute();

    // Cerrar la conexión
    $sentencia = null;
    $mysqli = null;

    // Devolver una respuesta a JavaScript
    echo "Se grabó el usuario = $usuario, con respuesta = $respuesta";
    }
?>

solución

Como ha apuntado @juliocpiro descomenta esta línea del jQuery:

        agregarDatos(valor);

de lo contrario la función que hace la petición Ajax no se ejecutará nunca.


Prueba el código de esta forma. He ido controlando lo que ocurre en cada posibilidad, construyendo siempre un $json que será la respuesta del servidor. Luego en el done de la llamada Ajax podrás ver lo que ha ocurrido en agregar.php y actuar en consecuencia.

/*Verificar que estén todos los datos*/
if (isset($_POST['usuario']) && !empty($_POST['usuario']) && isset($_POST['respuesta']) && !empty($_POST['respuesta'])) 
{
    $usuario = $_POST['usuario'];
    $respuesta = $_POST['respuesta'];
    //Datos de conexión a la base de datos
    $host       = "localhost";
    $usuario_db    = "root"; //Había dos variables $usuario
    $clave      = "******NO-OLVIDES-PONER-AQUI-TU-CLAVE-EN-EL-CODIGO-REAL****";
    $basedatos  = "evaluacion";
    $tabla      = "pregunta";

    // Conectar a la base
    //  la variable $myslqi contendrá el objeto con la conexión
    $mysqli = mysqli_connect($host, $usuario_db, $clave, $basedatos);

    /*Verificar si la conexión se realizó*/
    if (mysqli_connect_errno($mysqli)) 
    {
        $error="Error al conectar a MySQL: " . mysqli_connect_error();
        $json=array(1=>$error);
    }

    // insert en la base
    $sentencia = $mysqli->prepare("INSERT INTO $tabla (usuario, respuesta) VALUES (?, ?)");

    /*Verificar si la sentencia se preparó*/
    if ($sentencia)
    {
        /*Esta parte es MUY IMPORTANTE para darle seguridad al código 
         *evitando la Inyección SQL
         *las letras "si"  deben coincidir con el tipo de dato
         *que tiene la columna en la base de datos
         *aquí suponemos que usuario es string, por eso hay una s
         *y que respuesta es integer, por eso hay una i
        */
        $sentencia->bind_param("si", $usuario, $respuesta );
        $sentencia->execute();

        /*Verificar si se insertaron datos*/
        if ($sentencia->affected_rows)
        {
            $json=array(2=>$sentencia->affected_rows);              
        }else{
            $json=array(3=>"Ningún dato insertado");

        }

        // Cerrar la $sentencia
        $sentencia = null;

    }else{
            $json=array(4=>"Error en la instrucción SQL");

    }

    //Cerrar la conexión
    $mysqli = null;

}else{
            $json=array(5=>"La petición ajax no envió los datos correctamente");    
}

/*Respuesta que manejará la petición Ajax en examen.php*/
echo json_encode($json);
Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *