Implementierungscode für die teilweise Aktualisierung einer HTML-Seite

Implementierungscode für die teilweise Aktualisierung einer HTML-Seite

Aktualisierung der Ereignisantwort: Aktualisierung nur auf Anforderung

1. Holen Sie sich HTML-Elemente über JS HTML DOM oder jQuery, überwachen Sie Seitenereignisse über DOM-Methoden oder jQuery-Methoden und erhalten Sie Benutzeranforderungen.

2. Senden Sie die Benutzeranforderung über Ajax an den Server. Der Server gibt nach der Verarbeitung das Ergebnis zurück und dann empfängt Ajax die Daten.

3. Laden Sie Daten über die DOM-Methode oder die jQuery-Methode in die Seite, und die Aktualisierung der Ereignisantwort ist abgeschlossen.

$('#Eingabedatum').Tastendruck(Funktion(e){

  wenn(e.keyCode=='13'){

    $.ajax({

      Typ: "POST",

      URL: "inquire_date.php",

      Daten: {

        Geburt:null,

//1. Benutzeranfragen (also bestimmte Ereignisse) abrufen und zur Verarbeitung an den Server senden date:$('#input_date input').val()

      },

      Datentyp: "json",

//2. Daten vom Server abrufen erfolgreich: function(data){

        wenn (Daten.Erfolg) {

          var Festival = Daten.FestivalInquireResult;

//3. Laden Sie die erfassten Daten in die Seite, um die Seitenereignisantwort zu implementieren. refresh$('#show_festival').text(festival);

        } anders {

          $('#show_festival').text("Festival konnte nicht abgerufen werden");

        }  

      },

      Fehler: Funktion(jqXHR){     

        alert("Fehler: " + jqXHR.status);  
      },     

    });

  $('#festival').hide();

  $('#response_festival').anzeigen();

  }

});

Teilweise automatische Aktualisierung: Die Teilseite wird automatisch aktualisiert, auch wenn keine Anforderung erfolgt

1. Verwenden Sie eine Timerfunktion wie setTimeout(), damit Ajax in regelmäßigen Abständen Daten vom Server abruft.

2. Laden Sie Daten mit der DOM-Methode oder der jQuery-Methode in die Seite, um eine automatische Aktualisierung eines Teils der Seite zu erreichen.

$(Dokument).bereit(Funktion(e){

    setTimeout('updateShow()',0);

});

/*Teilweise automatische Aktualisierung der Seitendaten*/

Funktion updateShow(){

  $.ajax({

    Typ: "GET",

    URL: "inquire_date.php?data=" + "anfragen",

    Datentyp: "json",

//1. Regelmäßig Daten vom Server über einen Timer abrufen success: function(data) {

      wenn (Daten.Erfolg) {

        var agesFormat = data.agesFormat;

        var TageFormat = Daten.TageFormat;

//2. Laden Sie Daten in die Seite, um eine automatische Aktualisierung zu erreichen$('#ages').text(agesFormat);

       $('#Tage').text(TageFormat);

      } anders{

        alert("Daten konnten nicht abgerufen werden");

      }

    },

    Fehler: Funktion(jqXHR){     

      alert("Fehler: " + jqXHR.status);  

    },

  });

  setTimeout('updateShow()',500);

}

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<:  So fügen Sie Emoji-Ausdrücke in MySQL ein

>>:  Erstellen, Hochladen, Abrufen und Bereitstellen von Docker-Images (mithilfe von Alibaba Cloud)

Artikel empfehlen

Referenz zum Detaildesign des Benutzererlebnisses auf B2C-Websites

Als ich kürzlich Apple.com/Ebay.com/Amazon.com/sh...

Über nginx zur Implementierung des Jira-Reverse-Proxys

Zusammenfassung: Nginx-Reverse-Proxy für JIRA kon...

Beispielcode zur Implementierung des Bildschubladeneffekts mit CSS3

Wie üblich posten wir zuerst den Bildeffekt: Das ...

Beispielcode für CSS-Pseudoklassen zum Ändern des Eingabeauswahlstils

Hinweis: Diese Tabelle ist aus dem W3School-Tutor...

SMS-Bestätigungscode-Anmeldefunktion basierend auf Antd Pro (Prozessanalyse)

Inhaltsverzeichnis Zusammenfassung Gesamtprozess ...

Tutorial zur Installation des Nginx-RTMP-Streaming-Servers unter Ubuntu 14

1. RTMP Das RTMP-Streaming-Protokoll ist ein von ...

MySQL partitioniert vorhandene Tabellen in der Datentabelle

Inhaltsverzeichnis So funktioniert es Betriebsabl...

Detaillierte Zusammenfassung von MySQL und verbindungsbezogenen Timeouts

MySQL und verbindungsbezogene Timeouts Vorwort: H...

Häufige Ursachen und Lösungen für langsame MySQL-SQL-Anweisungen

1. Langsame Abfrage aufgrund fehlenden oder ungül...

Grundlegende Verwendung des Befehls wget unter Linux

Inhaltsverzeichnis Vorwort 1. Laden Sie eine einz...

HTML-Lernhinweise – Detaillierte Erklärung der HTML-Syntax (unbedingt lesen)

1. Was ist die HTML-Auszeichnungssprache? HTML is...

Schreiben Sie Ihr HTML so, um Ihren Code kompatibler zu machen

Beispielsweise Benutzer, die eine Bildschirmleseso...