Consulta Mysql desde Javascript con Ajax

publicado por: Anonymous

Quería saber cómo puedo hacer una consulta Mysql a una hora concreta con este reloj que tengo en Javascript. Tengo entendido que hay que usar Ajax, pero he intentado incluir la parte de Ajax dentro del if de la hora que deseo, y todo deja de funcionar (el reloj y la consulta). ¿Alguna ayuda?

Muchas gracias por adelantado.

        <!DOCTYPE html>
      <html>
       <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <meta name="viewport" content="width=device-width">
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
         <script>

    function clock(id){ //El parametro id es donde se escribirá la hora

    var seeTime = "2017-10-02 13:42:20"; //fecha y hora de gatillamiento de evento
    var clock = document.getElementById(id); //Asignamos una variable al elemento del documento donde escribiremos la hora

    var Digital=new Date(); //Creamos el objeto Date para obtener la fecha completa
    var h = Digital.getHours(); //hora
    var m = Digital.getMinutes(); //mins
    var s = Digital.getSeconds(); //segs
    var year = Digital.getFullYear(); //año
    var month = Digital.getMonth()+1; //mes, +1 ya que este metodo da de 0-11 en vez de 1-12
    var day = Digital.getDate(); //dia


    //Agregamos los 0 si son menores a 10
    if(month < 10){ month = "0"+month; }
    if(day < 10){ day = "0"+day; }
    if(h < 10){ h = "0"+h; }
    if(m < 10){ m = "0"+m; }
    if(s < 10){ s = "0"+s; }

    var myTime = year+"-"+month+"-"+day+" "+h+":"+m+":"+s; //Esta variable es para obtener la fecha completa en formato "YYYY-mm-dd HH:mm:ss" PARA GATILLAR EVENTO

    h = parseInt(h); //Volvemos a hacer numerico la hora, ya que concatenmos arriba
    var hs = "PM"; //Damos la premisa que es PM. "hs" de hour system
    if(h > 12){ //Si la hora es mayor que 12.... 
    h -= 12; //Quitamos 12 horas de modo que las 16hr es 16-12=4
    }
    else{ //De no ser así dejamos tal cual y decimos que es AM
    hs = "AM";
    }

    var showTime = h+":"+m+":"+s+" "+hs; //Obtenemos la hora a mostrar "HH:mm:ss AM/PM"
    clock.innerHTML = showTime; //Escribimos hora

        if(myUnixTime(myTime) == myUnixTime(seeTime)){ //Si myTime == seeTime gatillamos evento 
        //Gatillamos evento

         $(function() { //usamos function porque document.ready es deprecated desde jQuery 3

        //Guardamos una variable timer para poder pararla si ocurre error
        var timer = setInterval(update, 1000);

        function update() 
        { 
            //Almacenamos la petición ajax en la variable request
            var request = $.ajax
                ({
                    url: "copia de consulta.php",
                    method: "POST",
                    dataType: "json"
                });


                //Usamos request y evaluamos usando done y fail, es lo recomendado por jQuery
                //done se lanzará cuando la petición Ajax tenga éxito
                request.done(function( datos ) 
                {
                    console.log(datos);

                    // Creamos una variable y evaluamos datos
                    var txtHTML;
                    if (!datos.error)
                    {
                       //Si se espera más de una fila hay que leer datos en un bucle
                        /*txtHTML=datos.ID+"<br />"+datos.nombre;*/

                        $.each(datos, function(key, value) 
                            { 
                                txtHTML +=key + ": " + value; 
                            });

                     }else{
                        txtHTML=datos.error;
                        clearInterval(timer); //paramos el timer
                     }
                     $('#contenedor').text(txtHTML);
                });

                //fail se lanzará cuando la petición Ajax falle      
                request.fail(function( jqXHR, textStatus ) 
                {
                    alert( "Falló la petición Ajax: " + textStatus );
                    //Paramos el timer
                    clearInterval(timer); 
                });

            }

    });

        //document.getElementById('liveclock').innerHTML = "Hello World!";

        }
    }


    function myUnixTime(d){ //Esta funcion obtiene los segundos de una fecha dada en formato "YYYY-mm-dd HH:mm:ss" en este caso la fecha es el parametro "d"
    var mArr = [31,28,31,30,31,30,31,31,30,31,30,31]; //Cantidad dias de c/mes

    var spl = d.split(" "); //Separamos la fecha de la hora spl[0] = fecha, spl[1] = hora
    var date = spl[0].split("-"); //Separamos los datos de la fecha date[0] = año, date[1] = mes, date[2] = dia

    // Es necesario usar parseInt() para obtener el valor numerico de los datos
    var y = parseInt(date[0])*365*24*60*60; //Agregamos los segundos que tiene un año
    var m = parseInt(date[1]); //Obtenemos el mes, lo usaremos luego
    var d = parseInt(date[2])*24*60*60; //Obtenemos los segundos de un dia

    //Aqui lo que haremos es sumar la cantidad de dias de los meses que han pasado 
    var mAdd = 0; //Los dias se agregaran en esta variable
    for(var k=0;k<m;k++){ //Partimos desde el indice 0 de mArr (cantidad dias/mes) hasta el mes en el que estamos
    mAdd += mArr[k]; //Agregamos a mAdd la cantidad de dias de dias del mes con indice k
    }

    m = mAdd*24*60*60; //Obtenemos la cantidad de segundos del total de meses transcurridos

    var time = spl[1].split(":"); //Separamos los datos de la hora time[0] = hora, time[1] = mins, time[2] = seg

    var h = parseInt(time[0])*60*60; //Agregamos segundos en 1 hora
    var m = parseInt(time[1])*60; //Agregamos segundos en 1 min
    var s = parseInt(time[2]); //...

    return y+m+d+h+m+s; //retornamos la suma de todos los segundos obtenidos
    }


    window.onload=function(){ //Cuando la ventana cargue...
    setInterval("clock('liveclock')",1000); //Creamos un intervalo de 1000ms a la funcion myClock, ms= mili segundos, 1000ms = 1s
    };

    </script>
    <div class="reloj">
              <br><span class="clock" id="liveclock"></span><br></div>
         <script type="text/javascript">

        </script>

    </head>
    <body>

     <section class="content">
      <p>CONSULTA BASE DE DATOS CADA SEGUNDO</p>
      <p><div id="contenedor">0</div>
     </section>

    </body>
    </html>

El archivo “copia de consulta.php”:

  $mysqli = new mysqli("localhost", "usuario", "contraseña", "nombre bd");
    // verificar la conexión 

    if ($mysqli->connect_errno) {
        $arrRespuesta=array("error"=>"Conexión fallida: ".$mysqli->connect_error);

    }else{

         $consulta = "SELECT * FROM productos";

         if ($resultado = $mysqli->query($consulta)) {
            // obtener un array asociativo 
            $arrRespuesta=array();

            while ($fila = $resultado->fetch_assoc()) {
                $arrRespuesta[]=$fila;
            } 

            // liberar el conjunto de resultados 
            $resultado->free();
         }else{
            $arrRespuesta=array("error"=>"Hubo un problema con la consulta");

         }
        // cerrar la conexión 
        $mysqli->close();
    }


    //Al final de todo imprimimos el JSON que será recogido en la petición //Ajax/jQuery
    $json = json_encode($arrRespuesta);
    header('Content-Type: application/json');
    echo $json;

solución

Voy a señalar algunas partes problemáticas de tu código, aportando una solución.

También usaremos código actualizado, según las recomendaciones de jQuery.

He comentado las partes del código donde he introducido cambios.

NOTA DE EDICIÓN:

  • Estableceremos el charset de la conexión a UTF-8 para asegurar que nuestro JSON se creará sin errores.
  • Leeremos la respuesta de Ajax dentro de dos bucles, puesto que estamos recibiendo un array asociativo.
  • La var txtHTML=""; debe estar inicializada a "" para que no te de undefined al principio.

jQuery

$(function() { //usamos function porque document.ready es deprecated desde jQuery 3

    //Guardamos una variable timer para poder pararla si ocurre error
    var timer = setInterval(update, 1000);

    function update() 
    { 
        //Almacenamos la petición ajax en la variable request
        var request = $.ajax
            ({
                url: "copia de consulta.php", //¿Ese archivo se llama así realmente?
                method: "POST",
                dataType: "json"
            });

            
            //Usamos request y evaluamos usando done y fail, es lo recomendado por jQuery
            //done se lanzará cuando la petición Ajax tenga éxito
            request.done(function( datos ) 
            {

                // Creamos una variable y evaluamos datos
                var txtHTML="";
                if (!datos.error)
                {
                    //Si se espera más de una fila hay que leer datos en un bucle
                    //txtHTML=datos.ID+"<br />"+datos.nombre ;

                    $.each(datos, function(i, object) {
                        $.each(object, function(property, value) {
                            txtHTML +=property + "=" + value+"<br />";
                            //Prueba
                            console.log(property + "=" + value+"<br />");
                        });
                        txtHTML +="<hr />";   
                    });

                 }else{

                    txtHTML=datos.error;
                    clearInterval(timer); //paramos el timer
                 }
                 $('#contenedor').text(txtHTML);
            });

            //fail se lanzará cuando la petición Ajax falle         
            request.fail(function( jqXHR, textStatus ) 
            {
                alert( "Falló la petición Ajax: " + textStatus );
                //Paramos el timer
                clearInterval(timer); 
            });
    
    }

});

PHP

Dado que jQuery espera una respuesta JSON, lo cual es una muy buena idea, en el código PHP construiremos una respuesta de ese tipo.

Es muy importante guardar una variable e imprimir lo que sea sólo al final. Por eso, nuestra variable $arrRespuesta será nuestra única variable, que tomará valores según lo que ocurra. Y la imprimiremos al final.

NOTA DE EDICIÓN: Aquí sólo hemos añadido esta línea: $mysqli->set_charset("utf8");

$mysqli = new mysqli("host", "usuario", "contraseña", "base de datos");
// verificar la conexión 

if ($mysqli->connect_errno) {
    $arrRespuesta=array("error"=>"Conexión fallida: ".$mysqli->connect_error);

}else{
     /*Establecemos el charset a la conexión para evitar datos erróneos*/
     $mysqli->set_charset("utf8");
     $consulta = "SELECT * FROM productos";

     if ($resultado = $mysqli->query($consulta)) {
        // obtener un array asociativo 
        $arrRespuesta=array();
        while ($fila = $resultado->fetch_assoc()) {
            $arrRespuesta[]=$fila;
        }

        // liberar el conjunto de resultados 
        $resultado->free();

     }else{

        $arrRespuesta=array("error"=>"Hubo un problema con la consulta");

     }

    // cerrar la conexión 
    $mysqli->close();
}



//Al final de todo imprimimos el JSON que será recogido en la petición Ajax/jQuery
$json = json_encode($arrRespuesta);
header('Content-Type: application/json; charset=utf8');
echo $json;
Respondido por: Anonymous

Leave a Reply

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