Ich möchte an dieser Stelle drei Demos für die grundlegende Anwendung der fetch-API vorstellen. Diese ermöglicht es, Daten an den Server zu übertragen ohne die Seite durch das Abschicken eines Formulars neu zu laden. In meinen Augen ist sie einfacher und übersichtlicher als das ältere XMLHttpRequest und daher meine bevorzugte Methode. Die Demos beschränken sich jeweils auf den Kern der Sache. Erweiterte Funktionen, z. B. Validierung der Daten, müssen ggf. noch hinzu gefügt werden. Anstatt den Code im Text zu erklären, habe ich jeweils Kommentare eingefügt.
Demo 1: Formulardaten an den Server schicken
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Fetch-API: Send Form Data</title>
</head>
<body>
<form id="the-form">
<input type="text" name="param1" value="some-param">
<input type="text" name="param2" value="some-other-param">
<input type="number" name="numparam" value="1.24">
<button type="submit">Abschicken</button>
</form>
<!-- In den folgenden Container wird die Antwort vom Server eingetragen: -->
<span id="out"></span>
<script>
// Eventlistener für das Abschicken des Formulars registrieren:
document.getElementById('the-form').addEventListener('click', event => {
// Um zu verhindern, dass die Seite mit dem PHP-Skript,
// direkt aufgerufen wird unterdrücken wir die Standard-Aktion:
event.preventDefault();
// PHP-Skript testpost.php aufrufen:
fetch('testpost.php', {
method: 'post',
// Die Daten des Formulars werden im body übertragen:
body: new FormData(document.querySelector('form'))
}).then(res => {
// Die Antwort vom Server wird als Text ausgewertet:
return res.text();
}).then(res => {
// Antwort vom Server in der Console ausgeben:
console.log(res);
// ... und in HTML-Element eintragen:
document.getElementById('out').innerHTML = res;
});
});
</script>
</body>
</html>Demo 2: Daten ohne Formular an den Server schicken
Für die Übertragung von Daten ist ein Formular nicht erforderlich. Sie können in das FormData-Objekt direkt eingetragen werden:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Fetch-API: Send POST Parameters</title>
</head>
<body>
<!-- In den folgenden Container wird die Antwort vom Server eingetragen: -->
<span id="out"></span>
<script>
// Neues FormData-Objekt erzeugen:
const params = new FormData();
// ... und die Parameter, die übertragen werden sollen, eintragen:
params.append('param1', 'some-param');
params.append('param2', 'some-other-param');
params.append('numparam', '1.24');
// Parameter mit der Methode POST an das Skript testpost.php schicken:
fetch('testpost.php', {
method: 'post',
body: params
}).then(res => {
// Die Antwort vom Server wird als Text ausgewertet:
return res.text();
}).then(res => {
// Antwort vom Server in der Console ausgeben:
console.log(res);
// ... und in HTML-Element eintragen:
document.getElementById('out').innerHTML = res;
});
</script>
</body>
</html>Zum Testen der Demos verwende ich dieses kurze PHP-Skript:
testpost.php
<?php
ini_set('display_errors', '1');
error_reporting(E_ALL);
// Alle POST-Parameter mit var_dump ausgeben:
var_dump($_POST);
// Jeden einzelnen POST-Parameter mit echo ausgeben:
foreach ($_POST as $key => $value) {
echo $key . ": " . $value . "<br>";
}Demo 3: Datei zum Server hochladen
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Fetch-API: Upload file</title>
</head>
<body>
<!-- Eingabefeld für das Auswählen der Datei: -->
<input type="file" id="file-input">
<!-- Button um das Hochladen nach dem Auswählen
einer Datei zu starten: -->
<button id="upload-btn">Upload</button>
<!-- In den folgenden Container wird die Antwort vom Server eingetragen: -->
<span id="out"></span>
<script>
const fileInput = document.querySelector('#file-input'),
uploadBtn = document.querySelector('#upload-btn');
// Eventlistener für Klick auf den Upload-Buttton registrieren:
uploadBtn.addEventListener('click', () => {
// Neues FormData-Objekt erzeugen:
const formData = new FormData();
// ... und die ausgewählte Datei dort eintragen:
formData.append('file', fileInput.files[0]);
// Datei zum Sever hochladen:
fetch('upload.php', {
method: 'POST',
body: formData,
}).then(response => {
return response.text()
}).then(text => {
console.log(text);
document.getElementById('out').innerHTML = text;
});
});
</script>
</body>
</html>Zum Testen dieser Demo verwende ich dieses kurze PHP-Skript:
upload.php
<?php
ini_set('display_errors', '1');
error_reporting(E_ALL);
// In $_FILES stehen die Informationen über die hochgeladene Datei:
var_dump($_FILES);
// 'file' ist darin gleich dem Namen des Eingabefeldes,
// mit dem die Datei zum Hochladen ausgewählt wurde:
if ($_FILES['file']['error'] != 0) {
echo 'Error: ' . $_FILES['file']['error'] . '<br>';
} else {
echo 'Datei ' . $_FILES['file']['name'] . ' wurde erfolgreich hochgeladen<br>';
// Die Datei steht unter einem temporäten Namen zur Verfügung.
// Wir übertragen sie in das gewünschte Verzeichnis.
// Dabei kann ggf. auch ein geänderter Dateiname verwendet werden.
move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
}Auch hier müssen ggf. noch weitere Funktionen hinzu gefügt werden: Beschränkung des Typs, z. B. auf Bilddateien, Beschränkung der Dateigröße etc.
Hier muss auf eine Einschränkung der fetch-API hingewiesen werden: Sie unterstützt, anders als das ältere XMLHttpRequest, keine Fortschrittsanzeige.
