Sehr oft ist es notwendig, Inhalte von Dateien, die auf dem Server gespeichert sind, in eine JavaScript-Variable zu laden oder sie in einem HTML-Element anzuzeigen, um eine Aufgabe in einer Webseite zu erledigen.So erhalten Sie Dateiinhalte in Javascript ohne JQuery
Wie kann ich das tun, ohne JQuery zu verwenden?
Eine der einfachsten Möglichkeiten, die ich gefunden habe, besteht darin, eine Funktion zu erstellen, die eine Datei abruft und eine andere Funktion zurück ruft, wenn der Download bereit ist. Wenn also der Inhalt der Datei "test.txt" geladen wird, wird er im folgenden Beispiel in einem pre-Element angezeigt.
<html>
<body>
<pre id="output"></pre>
</body>
<script type="text/javascript">
function get_file(url, callback)
{
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET", url, true);
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
callback(xmlhttp.responseText);
}
}
xmlhttp.send();
}
get_file("test.txt", function(response)
{
document.getElementById("output").innerHTML=response;
});
</script>
</html>
WICHTIG
Wenn Sie Ihren XMLHttpRequest synchron machen wollen, nur die Zeile
xmlhttp.open("GET", url, true);
Um
xmlhttp.open("GET", url, false);
Aber es wird auf Kosten kommen Hängen Sie Ihre Webseite, bis die Daten geladen sind.
Versuchen holen mit: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
Es ist viel einfacher zu bedienen als XMLHttpRequest.
Dann, wenn Sie die Ressource geholt haben, verwenden Sie insertAdjacentHTML es auf das Dokument Körper hinzuzufügen: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
heißt
fetch("test.json")
.then(function(response) {
return response.json();
})
.then(function(json) {
document.body.insertAdjacentHtml("afterbegin", "<p>" + json + "</p>);
});
.catch(function(error) {
console.log('There has been a problem with your fetch operation: ' + error.message);
});