Warum erhalte ich keine Ausgabe in der Konsole?
Hallo Community,
ich versuche seit geraumer Zeit meine Programmierkenntnisse zu verbessern.
Aktuell probiere ich die Kommunikation zwischen JavaScript und PHP. Meine Konsole zeigt mir keine Fehler an, allerdings auch nicht den von mir gewollten console.log().
Wenn jemand weiß, woran das liegt, würde ich mich sehr freuen. :)
Das Ganze soll mit dem localhost von XAMPP funktionieren, wofür ich beide Dateien in den htdocs-Ordner gelegt habe.
Der JS-Anteil:
let user = {
"username": "Mike",
"password": "Mike567",
"gender": "male",
"email": "mike@mail.com"
}
fetch(test.php, {
"method" : "POST",
"headers": {
"Content-Type" : "application/json;charset-utf 8"
},
"body": JSON.stringify(user)
})
.then(function(response) {
return response.text()
})
.then(function(data) {
console.log("Hallo ich heiße" + data)
})
Der PHP-Anteil:
<?php
if (isset($_POST)) {
$data = file_get_contents("php://input");
$user = json_decode($data, true);
echo $user ["username"];
}
?>
2 Antworten
1) Die Ziel-URL ist nicht in Anführungszeichen gesetzt.
fetch("test.php", {
2) Die superglobale Variable $_POST existiert immer, auch wenn kein POST-Request empfangen wurde. Daher ist deine if-Abfrage nutzlos.
Sinnvoller an dieser Stelle wäre es, die Request-Methode abzufragen.
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
3) Von welcher Quelle liest dein PHP-Skript da ein? Gibt es die überhaupt bzw. liefert sie Inhalt und keinen Fehler?
Die Datenquelle, die du für file_get_contents zum Lesen angibst, muss existieren. Wenn der Lesevorgang scheitert, gibt die Funktion false zurück. Die json_decode-Funktion müsste daraufhin NULL als Ergebnis liefern und in der darauffolgenden Zeile kommt es schließlich zu einem Fehler (NULL ist kein Array, du kannst daher auf keinen Index zugreifen).
Schau im Netzwerk-Tab der Entwicklungstools deines Browsers: Der fetch-Reqeust wird sicherlich mit einem Reponse 500 beantwortet. Alternativ kannst du den Statuscode auch im Callback abfragen:
.then(function(response) {
console.log(response.status);
return response.text();
})
oder generell ein catch-Promise anhängen, um Fehler beim Request zu loggen:
fetch(/* ... */)
.then(/* handle response ... */)
.then(/* handle data ... */)
.catch(error => console.log(error));
Die Arrow Funktion für den Error Fall habe ich jetzt auch angehängt und habe noch einmal genauer in meine Konsole geschaut, wo folgendes One or more documents in this page is in Quirks Mode, which will render the affected document(s) with quirks incompatible with the current HTML and CSS specifications.
- Quirks Mode exists mostly due to historical reasons. If this is not intentional, you can add or modify the DOCTYPE to be `<!DOCTYPE html>` to render the page in No Quirks Mode.
- BETROFFENE RESSOURCEN
- 1 Element
- Dokument im DOM-BaumModusURLdocumentQuirks Modehttp://localhost:8080/test.php
steht, was hat das zu bedeuten ?
Hinzu kommt das ich die Meldungen von beiden Dateien mit dem Code 200 erhalte in den Netzwerktools
Du scheinst eine Audit-Meldung (Chrome fasst die in einer Sektion Issues zusammen) gelesen zu haben. Sie weist auf einen Fehler in deinem HTML-Dokument hin. Mit deinem JS-Problem hängt es allerdings nicht zusammen.
Zur Lösung für diese Meldung:
Stelle sicher, dass dein HTML-Dokument die Mindestanforderungen erfüllt.
1) In der ersten Zeile muss ein valider Doctype stehen. Der für HTML5 wäre:
<!DOCTYPE html>
oder
<!doctype html>
2) Im head-Bereich muss ein title-Element mit Textinhalt existieren (nur Whitespaces wären invalid).
Beispiel:
<title>My first page</title>
3) Der weitere HTML-Code muss valid sein. Du kannst den W3C-Validator nutzen, um Fehler aufzuspüren.
Bei einem invaliden HTML-Dokument wechselt der Browser in einen anderen Rendermodus, in dem er versucht, das Dokument noch bestmöglich zu interpretieren. Das er das tut, solltest du möglichst vermeiden.
Vielleicht einmal anders: Schau, was dein PHP-Skript macht.
Ändere es etwas um und ruf es dann im Browser auf.
<?php
$data = file_get_contents("php://input");
var_dump($data);
$user = json_decode($data, true);
var_dump($user);
var_dump($user["username"]);
Im Übrigen habe ich gerade noch einen Fehler entdeckt: Die Angabe der Zeichenkodierung ist falsch. Das Property heißt charset, der Wert utf-8.
"Content-Type" : "application/json;charset=utf-8"
Für deinen Fall ist die Angabe der Zeichenkodierung allerdings überflüssig. JSON-Daten werden standardmäßig als UTF-8-kodiert behandelt.
Ich bekomme bei der Änderung die Ausgabe : string(0) "" NULL NULL
woran liegt das ? Das bedeutet doch, dass keine Daten übertragen werden
Ich habe dein Beispiel einmal konkret bei mir ausprobiert (ebenso via XAMPP/Apache).
index.php:
<!doctype html>
<title>Example</title>
<script>
let user = {
"username": "Mike",
"password": "Mike567",
"gender": "male",
"email": "mike@mail.com"
}
fetch("read.php", {
"method" : "POST",
"headers": {
"Content-Type" : "application/json"
},
"body": JSON.stringify(user)
})
.then(function(response) {
return response.text()
})
.then(function(data) {
console.log("Hallo ich heiße " + data)
})
</script>
read.php:
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$data = file_get_contents("php://input");
$user = json_decode($data, true);
echo $user ["username"];
}
Ausgabe in der Konsole:
Hallo ich heiße Mike
Die Daten, die mit dem Request verschickt werden, stehen im Payload (Entwicklertools > Netzwerk(-analyse)-Tab > Request selektieren). In dieser Ansicht kannst du auch via Kontextmenü (Rechtsklick auf Request-Eintrag) den cURL-Request kopieren. In dem ist der Payload im --data-raw-Parameter aufgeführt.
Woran es bei dir nun scheitert, kann ich leider nicht sagen. Du hast hoffentlich keinerlei Redirects eingerichtet?
Er scheint einfach nichts zu senden, obwohl ich es mit deinem Quelltext probiert habe erhalte ich folgende Meldung :
Übersicht
URL: http://localhost:8080/test.php
Status: 200 OK
Quelle: Netzwerk
Adresse: 127.0.0.1:8080
Anfrage
GET /test.php HTTP/1.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Upgrade-Insecure-Requests: 1
Host: localhost:8080
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.2 Safari/605.1.15
Accept-Language: de-DE,de;q=0.9
Accept-Encoding: gzip, deflate
Connection: keep-alive
Antwort
HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Date: Fri, 14 Jul 2023 12:53:28 GMT
Keep-Alive: timeout=5, max=100
Content-Length: 0
Connection: Keep-Alive
Server: Apache/2.4.53 (Unix) OpenSSL/1.1.1o PHP/8.1.6 mod_perl/2.0.12 Perl/v5.34.1
X-Powered-By: PHP/8.1.6
Beide Dateien müssen von Typ Php stammen, oder ?
Diese Redirects hätte ich dann ja auch einrichten müssen, was ich meiner Erinnerung nach nie gemacht habe, daher denke ich nicht, dass es vorliegt
Das ist ein GET-Request, den du da gepostet hast.
- Öffne die Seite, die den fetch-Request ausführen soll.
- Öffne den Network-Tab in den Webentwicklungstools.
- Lade die Seite einmal neu (Shortcut: F5)
- Nun sollte es einen Eintrag geben, der die test.php anfordert und dabei die POST-Methode nutzt
Die Datei mit dem PHP-Code muss eine PHP-Datei sein. Bei der anderen ist es egal.
Es hat funktioniert ich danke dir für deine Zeit und Unterstützung ich habe die php Datei über den localhost geöffnet gehabt, die natürlich nicht ausgeführt werden kann.
fetch('http://localhost/test.php',{
Oder eben eine gültige URL die eine gültige JSON Response zurückgibt.
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
Also der Webserver gibt mir zumindest keinen Fehler zurück, wenn ich versuche den Link zu öffnen ich hatte den gerade zu mindest einmal auf
fetch("http://localhost:8080/test.php",{
"method" : "POST",
"headers": {
"Content-Type" : "application/json;charset-utf 8"
},
"body": JSON.stringify(user)
})
geändert
Beide Pfade sind richtig (so lange die Anführungszeichen nicht fehlen). Da die test.php im Rootverzeichnis (htdocs) liegt und du im Browser den Pfad /test.php aufrufst, wird sie auch gefunden.
Ok Punkt 1 habe ich verstanden, was genau meinst du mit Nr. 3