Ajax Request in HTML anzeigen

3 Pluspunkte 0 Minuspunkte

Ich habe dieses Script

var xhr = new XMLHttpRequest();
xhr.open('GET', 'ajax.php', true);

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    var responseData = JSON.parse(xhr.responseText);
    console.log(responseData);
  } else {
    console.error('Request failed with status:', xhr.status);
  }
};

xhr.onerror = function() {
  console.error('Request failed');
};

xhr.send();

weiß aber nicht wie ich das geladene HTML in meiner Website anzeigen kann.

von  

1 Antwort

0 Pluspunkte 0 Minuspunkte

In diesem Beispiel enthält die HTML-Datei ein leeres div-Element mit der ID "output". Der JavaScript-Code im <script>-Tag führt eine GET-Anfrage mithilfe von XMLHttpRequest durch und zeigt bei erfolgreicher Abschluss der Anfrage die Antwortdaten oder eine Fehlermeldung im "output" div an.

<html>
<head>
    <title>HTTP-Anfrage Beispiel</title>
</head>
<body>

<h1>HTTP-Anfrage Beispiel</h1>

<div id="output"></div>

<script>
    var outputElement = document.getElementById('output');

    // Neue XMLHttpRequest erstellen
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'ajax.php', true);

    xhr.onload = function() {
        if (xhr.status >= 200 && xhr.status < 300) {
            var responseData = JSON.parse(xhr.responseText);
            
            // Ausgabe in das DIV schreiben
            outputElement.textContent = JSON.stringify(responseData, null, 2);

        } else {

            // Fehlermeldung in das DIV schreiben
            outputElement.textContent = 'Anfrage fehlgeschlagen mit Status: ' + xhr.status;

        }
    };

    xhr.send();
</script>

</body>
</html>
von  

Ähnliche Fragen