it-swarm.com.de

Aktualisieren Sie die Daten auf einer Seite, ohne sie zu aktualisieren

Ich habe eine Website, auf der ich einen Status aktualisieren muss. Wie bei einem Flug, Sie gehen, kreuzen oder landen. Ich möchte in der Lage sein, den Status zu aktualisieren, ohne dass meine Zuschauer das Ganze haben und neu laden müssen Seite. Ich weiß, dass es eine Möglichkeit gibt, dies mit AJAX und jQuery zu tun, aber ich habe kein Verständnis dafür, wie das funktioniert. Ich möchte auch nicht, dass sie einen Button haben und klicken ... Wenn jemand weiß, wie das geschehen würde, schätze ich es sehr!

15
Gidimotje

Wenn Sie nicht wissen, wie etwas funktioniert, suchen Sie im Allgemeinen nach einem Beispiel, aus dem Sie lernen können.

Berücksichtigen Sie für dieses Problem this DEMO

Sie können sehen, dass das Laden von Inhalten mit AJAX mit jQuery sehr einfach ist:

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

Versuchen Sie zu verstehen, wie dies funktioniert, und versuchen Sie dann, es zu replizieren. Viel Glück.

Sie finden das entsprechende Tutorial HERE

Aktualisieren

Im Moment startet das folgende Ereignis die Funktion ajax load:

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

Sie können dies auch in regelmäßigen Abständen tun: Wie wird AJAX in regelmäßigen Abständen angefordert?

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

Ich habe für Sie eine Demo dieser Implementierung erstellt HERE. In dieser Demo wird der Inhalt alle 2 Sekunden (setTimeout(worker, 2000);) aktualisiert.

Sie können die Daten auch einfach sofort laden:

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

Welches hat THIS entsprechende Demo.

23
Jean-Paul

Sie können jQuery Ajax auf der offiziellen jQuery-Site nachlesen: https://api.jquery.com/jQuery.ajax/

Wenn Sie kein Klickereignis verwenden möchten, können Sie den Zeitgeber für die regelmäßige Aktualisierung einstellen.

Der folgende Code kann Ihnen nur als Beispiel dienen.

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

Die obige Funktion ruft alle 10 Sekunden auf und ruft den Inhalt von response.php ab und aktualisiert ihn in #some_div.

3
Butani Vijay

Ich denke, Sie möchten zuerst ajax lernen. Versuchen Sie Folgendes: Ajax Tutorial

Wenn Sie wissen möchten, wie ajax funktioniert, ist es keine gute Möglichkeit, jQuery direkt zu verwenden. Ich unterstütze, die native Methode zum Senden einer Ajax-Anfrage an den Server zu erlernen. Siehe etwas über XMLHttpRequest:

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

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

Angenommen, Sie möchten live-Feed-Inhalt (z. B. livefeed.txt) auf Ihrer Webseite ohne Seitenaktualisierung anzeigen, dann ist das folgende vereinfachte Beispiel für Sie.

In der folgenden html-Datei werden die live-Daten für das div -Element von id "liveData" aktualisiert.

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>

Nachfolgend autoUpdate.js liest die Live-Daten mithilfe des XMLHttpRequest -Objekts und aktualisiert das html-Element div alle 1 Sekunde. Zum besseren Verständnis habe ich zum Großteil des Codes Kommentare abgegeben. 

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

Zu Testzwecken: Schreiben Sie einfach etwas in die livefeed.txt - Sie werden in index.html gleich aktualisiert, ohne dass eine Aktualisierung erforderlich ist.

livefeed.txt

Hello
World
blah..
blah..

Hinweis: Sie müssen den obigen Code auf dem Webserver (z. B. http: // localhost: 1234/index.html ) nicht als Client-HTML-Datei (z. B. Datei) ausführen : /// C: /index.html).

0
SridharKritha