it-swarm.com.de

jQuery AJAX Abfragen der JSON-Antwort, Behandlung basierend auf AJAX Ergebnis oder JSON-Inhalt

Ich bin ein Anfänger für JavaScript/jQuery-Programmierer, so dass konkrete/ausführbare Beispiele sehr geschätzt werden.

Für mein Projekt muss mit AJAX eine URL abgefragt werden, die JSON zurückgibt, der entweder Inhalt enthält, der dem DOM hinzugefügt werden soll, oder eine Meldung {"status": "pending"}, die darauf hinweist, dass das Backend noch funktioniert beim Generieren einer JSON-Antwort mit dem Inhalt. Die Idee ist, dass die erste Anforderung an die URL das Backend dazu veranlasst, eine JSON-Antwort zu erstellen (die dann zwischengespeichert wird), und nachfolgende Aufrufe prüfen, ob diese JSON bereit ist (in diesem Fall wird sie bereitgestellt).

In meinem Skript muss ich diese URL in Abständen von 15 Sekunden bis zu 1:30 Minuten abfragen und Folgendes tun:

  • Wenn die Anforderung AJAX zu einem Fehler führt, beenden Sie das Skript.
  • Wenn die Anforderung AJAX zum Erfolg führt und der JSON-Inhalt {"status": "pending"} enthält, fahren Sie mit der Abfrage fort.
  • Wenn die Anforderung AJAX zum Erfolg führt und der JSON-Inhalt verwendbaren Inhalt enthält (dh jede gültige Antwort außer {"status": "pending"}), zeigen Sie diesen Inhalt an, beenden Sie das Abfragen und beenden Sie das Abfragen das Skript.

Ich habe ein paar Ansätze mit begrenztem Erfolg ausprobiert, aber ich habe das Gefühl, dass sie alle unordentlich sind, als sie sein müssten. Hier ist eine Skelett-Funktion, die ich mit Erfolg verwendet habe, um eine einzelne AJAX -Anfrage gleichzeitig zu erstellen, die ihre Aufgabe erfüllt, wenn ich brauchbaren Inhalt aus der JSON-Antwort bekomme:

// make the AJAX request
function ajax_request() {
  $.ajax({
    url: JSON_URL, // JSON_URL is a global variable
    dataType: 'json',
    error: function(xhr_data) {
      // terminate the script
    },
    success: function(xhr_data) {
      if (xhr_data.status == 'pending') {
        // continue polling
      } else {
        success(xhr_data);
      }
    },
    contentType: 'application/json'
  });
}

Diese Funktion führt jedoch derzeit nichts aus, es sei denn, sie erhält eine gültige JSON-Antwort, die verwertbaren Inhalt enthält.

Ich bin nicht sicher, was ich auf den Zeilen tun soll, die nur Kommentare sind. Ich vermute, dass eine andere Funktion das Abfragen handhaben sollte, und ruft ajax_request () nach Bedarf auf, aber ich weiß nicht, wie ajax_request () auf eleganteste Weise seine Ergebnisse an die Abruffunktion zurückmeldet, damit sie angemessen antworten kann.

Jede Hilfe wird sehr geschätzt! Bitte lassen Sie mich wissen, ob ich weitere Informationen geben kann. Vielen Dank!

46
Bungle

Sie können ein einfaches Timeout verwenden, um ajax_request rekursiv aufzurufen.

success: function(xhr_data) {
  console.log(xhr_data);
  if (xhr_data.status == 'pending') {
    setTimeout(function() { ajax_request(); }, 15000); // wait 15 seconds than call ajax request again
  } else {
    success(xhr_data);
  }
}

Setzen Sie einen Zähler um diese Zeile und Sie haben eine maximale Anzahl von Umfragen.

if (xhr_data.status == 'pending') {
  if (cnt < 6) {
    cnt++;
    setTimeout(function() { ajax_request(); }, 15000); // wait 15 seconds than call ajax request again
  }
}

Sie müssen nichts in Ihrer Fehlerfunktion tun, es sei denn, Sie möchten einen Alarm auslösen oder so etwas. Die einfache Tatsache, dass ein Fehler auftritt, verhindert, dass die Erfolgsfunktion aufgerufen wird und möglicherweise eine weitere Abfrage ausgelöst wird.

47
Joel

vielen dank für die funktion. Es ist ein bisschen fehlerhaft, aber hier ist der Fix. Die Antwort von roosteronacid endet nicht nach Erreichen von 100%, da die clearInterval-Funktion falsch verwendet wird. 

Hier ist eine Arbeitsfunktion:

$(function ()
{
    var statusElement = $("#status");

    // this function will run each 1000 ms until stopped with clearInterval()
    var i = setInterval(function ()
    {
        $.ajax(
        {
            success: function (json)
            {
                // progress from 1-100
                statusElement.text(json.progress + "%");

                // when the worker process is done (reached 100%), stop execution
                if (json.progress == 100) clearInterval(i);
            },

            error: function ()
            {
                // on error, stop execution
                clearInterval(i);
            }
        });
    }, 1000);
});

Die clearInterval () - Funktion hat die Intervall-ID als Parameter und dann ist alles in Ordnung ;-)

Prost Nik

4
Nik

Aus meinem Kopf:

$(function ()
{
    // reference cache to speed up the process of querying for the status element
    var statusElement = $("#status");

    // this function will run each 1000 ms until stopped with clearInterval()
    var i = setInterval(function ()
    {
        $.ajax(
        {
            success: function (json)
            {
                // progress from 1-100
                statusElement.text(json.progress + "%");

                // when the worker process is done (reached 100%), stop execution
                if (json.progress == 100) i.clearInterval();
            },

            error: function ()
            {
                // on error, stop execution
                i.clearInterval();
            }
        });
    }, 1000);
});
3
cllpse

Sie können die JavaScript-Funktion setInterval verwenden, um den Inhalt alle 5 Sekunden zu laden.

var auto= $('#content'), refreshed_content; 
    refreshed_content = setInterval(function(){
    auto.fadeOut('slow').load("result.php).fadeIn("slow");}, 
    3000);

Für Ihre Referenz-

Div-Inhalt automatisch alle 3 Sekunden aktualisieren

0
appsntech