1

Estoy creando una web en la cual realizo una conexión a la base de datos, extraigo el valor de un campo y lo guardo en la variable velocidad_db usando php, para luego mostrar una imagen en pantalla:

<?php 
    //Conectar a la base de datos
    $conexion_mysql = mysqli_connect("x", "x", "x", "x"); 
    
    $sql = "SELECT SPEED FROM ORDERS WHERE ID=1";
    $res= mysqli_query($conexion_mysql, $sql);
    $datos = mysqli_fetch_array($res);

    //Obtener el valor del campo como un int
    $var = intval($datos['SPEED']);
    
    //Guardar la variable de php en js para luego poder usarla
    print '
    <script type="text/javascript">
         var velocidad_db;        
         velocidad_db = "' . $var . '"
         
    </script>';
    ?>

Luego, usando el valor de esta variable, intento mostrar una imagen acorde al valor de la variable usando el id spd:

//Codigo html que muestra la imagen
<img id="spd" src="" alt="">

<script type="text/javascript">

    //Muestro la imagen inicial al acceder a la web
    document.getElementById('vel').src = "../img/ve0.png"

    function speedm() {

        //Usar el valor de la base de datos extraido antes con la consulta php
        var final_spd = velocidad_db;
        document.getElementById("show_speed").innerHTML = final_spd;
        
        //Si el valor de la variable de la base de datos es 100, asignar la ruta al src de la imagen que tiene el id spd
        if (final_spd == 100) {
            document.getElementById("spd").src = "../img/ve1.png"
        } else if (final_spd == 200) {
            document.getElementById("spd").src = "../img/ve2.png"
        }
    }
</script>

Para mostrar este valor, uso el siguiente botón que llama a la función speedm. Al clicar el botón, la imagen se actualiza al valor sacado de la base de datos.

<button onclick="speedm()">ENVIAR</button>
<h2 id="show_speed"></h2>

Me gustaría realizar esto de forma automática, es decir, al cambiar el valor en la base de datos, que automáticamente se cambie la imagen que se muestra en mi web.

En la pregunta he añadido comentarios por si algo no se entiende ya que no se si es la forma correcta de hacer lo que quiero.

4
  • 1
    Estas intentando pasar una variable de PHP a JS?, usa AJAX
    – Srsole
    Commented el 27 ago. 2021 a las 10:48
  • @Srsole solo con usar ajax debería funcionar?
    – andyio
    Commented el 27 ago. 2021 a las 12:55
  • Supongo que si después de cambiar el valor en la base de datos, al actualizar la página se reflejará el cambio y aparecerá la nueva imagen. ¿no?
    – Juan
    Commented el 29 ago. 2021 a las 9:19
  • @Juan correcto, pero me interesa que se haga sin refrescar la pagina completamente.
    – andyio
    Commented el 30 ago. 2021 a las 5:15

1 respuesta 1

1

Lo que debes hacer es llamar a tu script de PHP desde una llamada AJAX.

Te dejo un ejemplo en JQuery

Ámbito: JS

    var velocidad_db = 0;
    $.ajax({
                url: 'tuScript.php',
                type: 'POST', // o GET
                data: {"clave": valor}, //por si quieres pasarle alguna variable a tu PHP
                dataType: 'JSON', //formato de salida del response
                success: function (response) {
                    //Aqui llega cuando el server termina la peticion, en tu caso:
                    velocidad_db = response.velocidad;
                }
    })

Ámbito: PHP

   //Conectar a la base de datos
    $conexion_mysql = mysqli_connect("x", "x", "x", "x"); 
    
    $sql = "SELECT SPEED FROM ORDERS WHERE ID=1";
    $res= mysqli_query($conexion_mysql, $sql);
    $datos = mysqli_fetch_array($res);

    //Obtener el valor del campo como un int
    $var = intval($datos['SPEED']);
    //Hasta aqui sin cambios. 
    //Esto es nuevo
    $result = [
            "velocidad" => $var
        ];
    echo json_encode($result);

La mecánica es muy simple, AJAX "llama" al servidor, y espera una respuesta, con esta respuesta puedes hacer lo que quieras, en este caso asignar un valor a una variable.

En el PHP, lo que cambiamos es:

  • Hacer un array asociativo, y lo codificamos como JSON, para que en la llamada se interprete correctamente.

Ten en cuenta que la petición AJAX es asíncrona, quiere decir que el código seguirá su curso, y cuando el servidor "conteste", ira a la sección del success de la petición AJAX.

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.