Wie man JSON-Daten per Button-Klick in JavaScript abruft und anhängt

Erfahren Sie, wie Sie in JavaScript einen interaktiven Button erstellen, der JSON-Daten abruft und anzeigt, wenn er angeklickt wird. --- Dieses Video basiert auf der Frage https://stackoverflow.com/q/62317709/ gestellt von dem Nutzer 'KSKULL' ( https://stackoverflow.com/u/13428810/ ) sowie auf der Antwort https://stackoverflow.com/a/62317777/ bereitgestellt von dem Nutzer 'mplungjan' ( https://stackoverflow.com/u/295783/ ) auf der Website 'Stack Overflow'. Vielen Dank an diese großartigen Nutzer und die Stackexchange-Community für ihre Beiträge. Besuchen Sie diese Links, um den Originalinhalt und weitere Details zu sehen, z. B. alternative Lösungen, aktuelle Entwicklungen zum Thema, Kommentare, Versionsverlauf usw. Der ursprüngliche Titel der Frage lautete beispielsweise: run function of fetching data after onclick Außerdem steht der Inhalt (außer Musik) unter der Lizenz CC BY-SA https://meta.stackexchange.com/help/licensing Der ursprüngliche Fragenbeitrag steht unter der Lizenz 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ), und der ursprüngliche Antwortbeitrag steht unter der Lizenz 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ). Falls Ihnen irgendetwas auffällt oder Unstimmigkeiten bestehen, schreiben Sie mir bitte an vlogize [AT] gmail [DOT] com. --- Wie man JSON-Daten per Button-Klick in JavaScript abruft und anhängt In der heutigen Webentwicklung ist es üblich, Daten aus externen Quellen abzurufen und auf Ihrer Webseite anzuzeigen. Ein typisches Szenario ist die Verwendung eines Buttons, um das Abrufen dieser Daten auszulösen. Dieser Blogbeitrag zeigt Ihnen Schritt für Schritt, wie Sie JSON-Daten abrufen und auf einer Webseite anzeigen, wenn der Benutzer auf einen Button klickt. Das Problem verstehen Vielleicht sind Sie bereits auf die Situation gestoßen, dass Sie JSON-Daten erst dann laden möchten, wenn ein Benutzer mit Ihrer Webseite interagiert, typischerweise durch einen Button-Klick. In Ihrem ursprünglichen Code haben Sie versucht, die JSON-Daten automatisch abzurufen und anzuzeigen – das war aber nicht beabsichtigt. Stattdessen möchten Sie, dass diese Aktion gezielt beim Klick auf einen Button ausgeführt wird. Die Lösung Um dieses Ziel zu erreichen, können wir die Lösung in einige klare Schritte unterteilen. Wir werden den vorhandenen HTML- und JavaScript-Code so anpassen, dass die Datenabfrage ausschließlich bei einem Button-Klick erfolgt. Schritt-für-Schritt Implementierung 1. Ändern Sie Ihr HTML Stellen Sie zunächst sicher, dass Ihr HTML ein Button-Element enthält. Statt <input type="submit"> verwenden wir <input type="button">, da so das Standardverhalten des Formular-Submit vermieden wird. [[Siehe Video, um diesen Text oder Codeausschnitt anzuzeigen]] 2. JavaScript zum Abrufen der Daten implementieren Als Nächstes fügen wir JavaScript hinzu, das auf den Button-Klick hört und dann die Daten aus der JSON-Datei abruft. [[Siehe Video, um diesen Text oder Codeausschnitt anzuzeigen]] Erklärung des Codes Event Listener: Wir verwenden window.addEventListener("load", ...), um sicherzustellen, dass unser Code erst nach vollständigem Laden der Seite ausgeführt wird. Button-Klick Listener: Die Zeile document.getElementById("Submit").addEventListener("click", ...) wartet darauf, dass der Nutzer den Button klickt, bevor Daten abgerufen werden. Fetch API: Die Funktion fetch holt die Daten von der angegebenen URL (quizQuestions.json), und die Antwort wird in das JSON-Format umgewandelt. Append-Funktion: Die Funktion appendData(data) zeigt die abgerufenen Daten an. Sie können div.innerHTML anpassen, um die Ausgabe nach Ihren Wünschen zu formatieren. 3. Alternativer Ansatz Wenn Sie die Daten einmalig beim Laden der Seite abrufen und diese per Button-Klick anzeigen oder ausblenden möchten, ist dieser Ansatz interessant: [[Siehe Video, um diesen Text oder Codeausschnitt anzuzeigen]] Dynamische Interaktion In diesem alternativen Ansatz werden die Daten nur einmal beim Laden der Seite abgerufen. Der Button-Klick toggelt nur die Sichtbarkeit der Daten mittels CSS-Klassen. Dies sorgt für eine effiziente und ansprechende Benutzererfahrung. Fazit Wenn Sie dieser Anleitung folgen, können Sie in Ihren JavaScript-Anwendungen dynamische Buttons erstellen, die Daten ausschließlich bei Benutzerinteraktion abrufen und anzeigen. Dies verbessert die Nutzererfahrung und lässt Ihre Anwendung reaktionsfreudiger wirken. Testen Sie Ihre Implementierung, um sicherzustellen, dass alles reibungslos funktioniert!