Wie kann ich ein Textfeld ausgeben, ohne die Seite neuladen zu lassen?
Hallo,
ich habe die letzten Tage damit verbracht, eine Wirtschaftssimulation mit PHP zu erstellen. Diese basiert auf anfangs wahren Zahlen, die sich in einer for-Schleife von Jahr zu Jahr zufällig abändern.
Soweit funktioniert alles. Es werden alle Daten über BIP, Inflation, Leitzinsen, Nachfragen in verschiedenen Bereichen und so weiter ausgegeben. Da das nach einigen 100-200 Schleifendurchläufen etwas unübersichtlich aussah, entschied ich mich, einen kleinen Chatbot zu bauen, der bei bestimmten Schlüsselwörtern die entsprechenden Daten zu dem Jahr ausspuckt. Soweit so gut.
Mein Problem ist, dass ich nicht weiß, wie ich die Schlüsselwörter aus dem Textfeld ausgeben lassen kann, ohne dass sich die Seite neulädt und sich somit die Daten verändern.
Ich dachte da zunächst an AJAX, doch da mein JavaScript etwas eingerostet ist, wollte ich nach Alternativen suchen. Hättet ihr Vorschläge oder könntet mir bei dem AJAX-Versuch helfen? Ich brauche nur die Infos aus dem Textfeld in eine PHP-Variable, ohne dass sich die Seite neulädt.
Danke im Voraus.
1 Antwort
Du kannst in JavaScript mit der fetch-API eine Anfrage an den Server (also ein PHP-Skript) schicken.
Beispiel:
<!doctype html>
<head>
<meta charset="utf-8">
<title>Example</title>
</head>
<form id="my-form">
<label for="name">Name</label>
<input id="name" name="name">
<input type="submit">
</form>
<script>
const form = document.getElementById("my-form");
form.addEventListener("submit", evt => {
evt.preventDefault();
const formData = new FormData(form);
const query = new URLSearchParams(formData);
fetch("URL to PHP script ...", { method: "POST", body: query })
.then(response => response.text())
.then(data => { /* do something with data ... */ });
});
</script>
Bei Klick auf den Button (bzw. Abschicken des Formulars) würden alle Daten aus dem Formular gesammelt und zu einem Querystring verarbeitet werden, der anschließend via POST-Request an den Server gesendet wird.
Sobald der Server antwortet, werden die then-Methoden (und somit auch die Callbacks, die ihnen übergeben werden) durchlaufen. Sie sind optional. Wenn du auf keine Antwort des Servers wartest oder die Antwort des Servers im Browser nicht verarbeiten willst, kannst du sie auch weglassen.
Aber nun einmal angenommen, das PHP-Skript würde den Namen oder einen leeren String einfach wieder zurückliefern:
<?php print (empty($_POST['name']) ? '' : $_POST['name'];
dann würde die text-Methode auch nur dieses Ergebnis zurückgeben. Es wird letzten Endes in die data-Variable eingespeist.
Was du anschließend mit dem Wert machst, ist dir überlassen. Du könntest ihn beispielsweise in der Browserkonsole ausgeben lassen.
/* ... */
.then(data => { console.log(data); });
Oder du holst dir bestimmte Elemente deines Dokuments mittels DOM-API und befüllst sie mit dem Wert.
Die fetch-API bietet dir aber auch noch mehr Einstellungsmöglichkeiten und Funktionen.
Wenn dein PHP-Skript einen validen JSON-String liefert:
<?php
$names = [[ 'name' => 'Anne' ], [ 'name' => 'Mathilda' ]];
print json_encode($names);
kann er im ersten then-Callback geparst werden:
/* ... */
.then(response => response.json())
.then(names => { /* do something with names ... */ });
und im zweiten then-Callback steht dir das JSON-Objekt direkt durch den Parameter (diesmal habe ich ihn names genannt) zur Verfügung.
Weitere Informationen findest du auf MDN.