Actualizar datos en una página sin actualizar

Nuestro equipo de expertos despúes de varios días de investigación y de juntar de información, obtuvieron los datos necesarios, nuestro deseo es que te resulte útil para tu trabajo.

Solución:

En general, si no sabe cómo funciona algo, busque un ejemplo del que pueda aprender.

Para este problema, considere esta demostración

Puede ver que cargar contenido con AJAX se logra muy fácilmente con jQuery:

$(function()
    // don't cache ajax or content won't be fresh
    $.ajaxSetup (
        cache: false
    );
    var ajax_load = "





";

    // load() functions
    var loadUrl = "http://fiddle.jshell.net/deborah/pkmvD/show/";
    $("#loadbasic").click(function()
        $("#result").html(ajax_load).load(loadUrl);
    );

// end  
);

Trate de entender cómo funciona esto y luego intente replicarlo. Buena suerte.

Puedes encontrar el tutorial correspondiente AQUÍ

Actualizar

Ahora mismo el siguiente evento inicia el ajax load función:

$("#loadbasic").click(function()
        $("#result").html(ajax_load).load(loadUrl);
    );

También puede hacer esto periódicamente: ¿Cómo activar la solicitud AJAX periódicamente?

(function worker() 
  $.ajax(
    url: 'ajax/test.html', 
    success: function(data) 
      $('.result').html(data);
    ,
    complete: function() 
      // Schedule the next request when the current one's complete
      setTimeout(worker, 5000);
    
  );
)();

Hice una demostración de esta implementación para ti. AQUÍ. En esta demostración, cada 2 segundos (setTimeout(worker, 2000);) el contenido se actualiza.

También puede simplemente cargar los datos inmediatamente:

$("#result").html(ajax_load).load(loadUrl);

Que tiene ESTE demostración correspondiente.

Supongamos que desea mostrar algunos contenido de transmisión en vivo (decir transmisión en vivo.txt) en su página web sin ninguna actualización de página, entonces lo siguiente simplificado el ejemplo es para ti.

en la parte inferior archivo htmlla datos en tiempo real se actualiza en el división elemento de identificación “datos en tiempo real”

índice.html

    
    
    


    
Loading Data...

Abajo autoUpdate.js lee los datos en vivo usando XMLHttpSolicitud objeto y actualiza el división html elemento en cada 1 segundo. He dado comentarios sobre la mayor parte del código para una mejor comprensión.

autoUpdate.js

window.addEventListener('load', function()

    var xhr = null;

    getXmlHttpRequestObject = function()
    
        if(!xhr)
                       
            // Create a new XMLHttpRequest object 
            xhr = new XMLHttpRequest();
        
        return xhr;
    ;

    updateLiveData = function()
    
        var now = new Date();
        // Date string is appended as a query with live data 
        // for not to use the cached version 
        var url = 'livefeed.txt?' + now.getTime();
        xhr = getXmlHttpRequestObject();
        xhr.onreadystatechange = evenHandler;
        // asynchronous requests
        xhr.open("GET", url, true);
        // Send the request over the network
        xhr.send(null);
    ;

    updateLiveData();

    function evenHandler()
    
        // Check response is ready or not
        if(xhr.readyState == 4 && xhr.status == 200)
        
            dataDiv = document.getElementById('liveData');
            // Set current data text
            dataDiv.innerHTML = xhr.responseText;
            // Update the live data every 1 sec
            setTimeout(updateLiveData(), 1000);
        
    
);

Para fines de prueba: simplemente escriba algo en livefeed.txt: se actualizará de la misma manera en index.html sin ninguna actualización.

transmisión en vivo.txt

Hello
World
blah..
blah..

Nota: Debe ejecutar el código anterior en el Servidor web (por ejemplo, http://localhost:1234/index.html) no como un archivo html de cliente (por ejemplo, archivo:///C:/index.html).

Puede leer sobre jQuery Ajax en el sitio oficial de jQuery: https://api.jquery.com/jQuery.ajax/

Si no desea utilizar ningún evento de clic, puede configurar el temporizador para que se actualice periódicamente.

El siguiente código puede ser de ayuda solo como ejemplo.

function update() 
  $.get("response.php", function(data) 
    $("#some_div").html(data);
    window.setTimeout(update, 10000);
  );

La función anterior llamará después de cada 10 segundos y obtenga contenido de response.php y actualice en #some_div.

Acuérdate de que tienes la capacidad de aclarar .

---

---

Utiliza Nuestro Buscador