web-dev-qa-db-fra.com

Mettre à jour les données sur une page sans actualiser

J'ai un site Web sur lequel j'ai besoin de mettre à jour un statut . Comme pour un vol, vous partez, croisière ou atterrissez . Je veux pouvoir actualiser le statut sans que mes téléspectateurs aient et rechargent tout page. Je sais qu'il existe un moyen de le faire avec AJAX et jQuery, mais je ne comprends pas comment cela fonctionne. Je ne veux pas non plus qu'ils aient et cliquent sur un bouton ... Si quelqu'un sait comment cela se ferait, je l'apprécie beaucoup!

phpjqueryajaxrefresh
15
Gidimotje

En général, si vous ne savez pas comment quelque chose fonctionne, cherchez un exemple à partir duquel vous pourrez apprendre.

Pour ce problème, considérez this DEMO

Vous pouvez voir que le chargement de contenu avec AJAX s’accomplit très facilement avec jQuery:

$(function(){
    // don't cache ajax or content won't be fresh
    $.ajaxSetup ({
        cache: false
    });
    var ajax_load = "<img src='http://automobiles.honda.com/images/current-offers/small-loading.gif' alt='loading...' />";

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

// end  
});

Essayez de comprendre comment cela fonctionne, puis essayez de le répliquer. Bonne chance.

Vous pouvez trouver le tutoriel correspondant HERE

Mettre à jour

À l’heure actuelle, l’événement suivant lance la fonction ajax load:

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

Vous pouvez également le faire périodiquement: Comment déclencher la demande AJAX périodiquement?

(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);
    }
  });
})();

J'ai fait une démonstration de cette implémentation pour vous HERE. Dans cette démonstration, le contenu est mis à jour toutes les 2 secondes (setTimeout(worker, 2000);).

Vous pouvez également simplement charger les données immédiatement:

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

Qui a THIS démo correspondante.

23
Jean-Paul

Vous pouvez en savoir plus sur jQuery Ajax sur le site officiel de jQuery: https://api.jquery.com/jQuery.ajax/

Si vous ne souhaitez utiliser aucun événement de clic, vous pouvez configurer le minuteur pour une mise à jour périodique.

Le code ci-dessous peut être vous aider juste exemple.

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

La fonction ci-dessus appelle toutes les 10 secondes et récupère le contenu de response.php et se met à jour dans #some_div.

3
Butani Vijay

Je pense que vous voudriez apprendre ajax d’abord, essayez ceci: Ajax Tutorial

Si vous voulez savoir comment fonctionne ajax, ce n'est pas un bon moyen d'utiliser directement jQuery. Je supporte pour apprendre la manière native d’envoyer une requête ajax au serveur, voyez quelque chose à propos de XMLHttpRequest:

var xhr = new XMLHttpReuqest();
xhr.open("GET", "http://some.com");

xhr.onreadystatechange = handler; // do something here...
xhr.send();
1
Shin

Supposons que vous souhaitiez afficher du contenu de flux live (par exemple, livefeed.txt) sur votre page Web sans aucune actualisation de page. L'exemple suivant simplifié vous est destiné.

Dans le fichier html ci-dessous, le live data est mis à jour sur l'élément div de l'id "liveData"

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Live Update</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="reloader.js"></script>
</head>
<div id="liveData">
    <p>Loading Data...</p>
</div>
</body>
</html>

Ci-dessous, autoUpdate.js lit les données en direct à l'aide de l'objet XMLHttpRequest et met à jour l'élément html div toutes les 1 secondes. J'ai commenté la plupart du code pour une meilleure compréhension. 

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);
        }
    }
});

À des fins de test: écrivez simplement quelque chose dans le fichier livefeed.txt - vous obtiendrez la même mise à jour dans index.html sans aucune actualisation.

livefeed.txt

Hello
World
blah..
blah..

Remarque: Vous devez exécuter le code ci-dessus sur le serveur Web (ex: http: // localhost: 1234/index.html ) non en tant que fichier html client (ex: fichier : /// C: /index.html).

0
SridharKritha