[SOLUCIONADO] ¿Por qué no se actualiza AJAX?

#1 (**permalink**) 19/09/2017, 12:29

Hola a todos.

He encontrado en internet un código de Ajax que hace algo parecido a lo que deseo hacer. En teoría este código va actualizando cada 3 segundos un número aleatorio establecido con la función rand en PHP. Se muestra correctamente el número, pero el problema es que no se actualiza cada 3 segundos, sólo lo hace cuando se refresca "manualmente" la página. Aclaro que no sé nada de Ajax. ¿Alguna ayuda?

Muchas gracias por adelantado.

Código Ajax:

Código HTML:

Ver original<!DOCTYPE html>
  <html>
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta name="viewport" content="width=device-width">
     <link rel="stylesheet" href="css/styles.css" type="text/css" media="all">
     <style>
       #counter {
        font-weight: bold;
        font-size: 40px;
       }
     </style>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
     <script type="text/javascript">
         $(document).ready(function() {  
         function update(){
         var current = $('#contenedor').text();
 
         $.ajax({
          type: "POST",
          url: "consulta.php",
          dataType: "json",
          success: function(response) {
          $('#contenedor').text(response);
         }
         });
        }
 
       setInterval(update, 3000);
     });
    </script>
</head>
<body>
 
 <section class="content">
  <p>ACTUALIZAR NÚMERO CADA 3 SEGUNDOS</p>
  <p><span id="contenedor">0</span>
 </section>
 
</body>
</html>

En el archivo consulta.php sólo tengo esto (no omito nada):

Código PHP:

<?php echo rand(0,100); ?>

mortiprogramador · #2 (**permalink**) 19/09/2017, 18:25

Saludo

Pues a mi me funcionó perfecto,
y solo copie y pegue.

Imagino que los archivos estan al mismo nivel en tu caso, no?

Igual revisa por el inspector del navegador
que la llamada al ajax sea exitosa.

Alexis88 · #3 (**permalink**) 19/09/2017, 22:27

El código parece estar bien, excepto por el valor de dataType establecido como "json" cuando lo que devuelve el servidor es solo un número. De todos modos, es algo irrelevante porque de todos modos debe mostrarse el resultado. Lo único que podría estar mal sería la ruta del archivo; aunque, si dices que funciona la primera vez, sería algo aún más extraño.

Revisa la consola del navegador para que veas el mensaje de error que posiblemente se esté imprimiendo o, mejor aun, genera el número aleatorio con JavaScript puro:

Código Javascript:

Ver originalfunction rand(min, max){
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
 
console.log(rand(5, 10)); //Imprime un número aleatorio entre 5 y 10, incluidos ambos

Fuente

#4 (**permalink**) 21/09/2017, 08:31

Cita:

Iniciado por mortiprogramador

Saludo

Pues a mi me funcionó perfecto,
y solo copie y pegue.

Imagino que los archivos estan al mismo nivel en tu caso, no?

Igual revisa por el inspector del navegador
que la llamada al ajax sea exitosa.

Cita:

Iniciado por Alexis88

El código parece estar bien, excepto por el valor de dataType establecido como "json" cuando lo que devuelve el servidor es solo un número. De todos modos, es algo irrelevante porque de todos modos debe mostrarse el resultado. Lo único que podría estar mal sería la ruta del archivo; aunque, si dices que funciona la primera vez, sería algo aún más extraño.

Revisa la consola del navegador para que veas el mensaje de error que posiblemente se esté imprimiendo o, mejor aun, genera el número aleatorio con JavaScript puro:

Código Javascript:

Ver originalfunction rand(min, max){
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
 
console.log(rand(5, 10)); //Imprime un número aleatorio entre 5 y 10, incluidos ambos

Fuente

Muchísimas gracias a los 2, es verdad, funciona perfectamente, pero tuve que instalar el EasyPHP, ya que estaba intentando usar Wamp y no funcionaba, quizá era por eso. Gracias de nuevo! :)