Ejercicio trivial ‘pregunta.php’ con divide y vencerás

Nuestra página tiene que hacer lo siguiente:

– Buscar una pregunta en la base de datos al azar
– Guardar la información en una variable
– Codificarla en json e imprimirla.

Las preguntas son ¿Sabemos recuperar una fila de una base de datos? Deberíamos (PDO). El problema es que queremos una fila al azar. Bien, es tan sencillo como usar este sql:

select * from preguntas order by rand() limit 1

Una vez tenemos esto podemos directamente pasar la fila al javascript o podemos crear nuestra variable dándole un poco de formato:

Si mi fila es $fila sería algo así:

$res['pregunta']=$fila['pregunta'];
$res['correcta']=$fila['respuesta1'];
$res['respuestas']=[$fila['respuesta1'],$fila['respuesta2'],$fila['respuesta3'],$fila['respuesta4']];
shuffle($res['respuestas']);

He aprovechado para desordenar las respuestas. Una vez hecho esto sólo hay que codificar en json e imprimir.

Ajax con js

index.php:

  <input type="text" id="nombre">
        
        
        <div id="resultado"></div>
        <script>
            document.getElementById("nombre").addEventListener("keyup", function () {
                var pepe = new XMLHttpRequest();

                pepe.onreadystatechange = function () {
                    if (this.readyState == 4 && this.status == 200) {
                        document.getElementById('resultado').innerHTML = this.responseText;
                        console.log(this.responseText);
                    }
                }
                var nombre=document.getElementById('nombre').value;
                pepe.open("POST", "datos.php");
                pepe.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                pepe.send("nombre="+nombre);


            })
        </script>

datos.php:

<?php

$nombre = filter_input(INPUT_POST, "nombre");
$server = "localhost";
$user = "root";
$password = "";
$db = "sakila";
try {
    $conn = new PDO("mysql:host=$server;dbname=$db", $user, $password, [PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'"]);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $sql="select * from actor where first_name like '%$nombre%'";
    
    $res=$conn->query($sql);
    $actores=$res->fetchAll();
    echo "<actores>";
    foreach($actores as $actor){
        echo "<actor><first_name>".$actor['first_name'].
                "</first_name><last_name>".$actor['last_name'].
                "</last_name></actor>";
    }
    echo "</actores>";

} catch (Exception $ex) {
    echo $ex->getMessage();
}

Ajax simple

  <input type="text" id="nombre">
        <input type="text" id="cantidad">
        <input type="button" id="boton" value="Llamada ajax">
        <div id="resultado"></div>
        <script>
            document.getElementById("boton").addEventListener("click", function () {
                var pepe = new XMLHttpRequest();

                pepe.onreadystatechange = function () {
                    if (this.readyState == 4 && this.status == 200) {
                        document.getElementById('resultado').innerHTML = this.responseText;
                    }
                }
                var nombre=document.getElementById('nombre').value;
                var cantidad=document.getElementById('cantidad').value;
                pepe.open("GET", "datos.php?nombre="+nombre+"&cantidad="+cantidad);
                pepe.send();


            })
        </script>

Hola , que tal estamos