JavaScript Simples String ausgeben

Chrisel · 23. September 2014

Hallo alle zusammen,
Ich habe vor mittels php und html/javascript eine simple abfrage von einem MySQL server zu machen wie hier beschrieben. Nachdem das Beispiel schon nicht geklappt hat, da ich immer ein "Kein Element gefunden" in der Console von Firefox kriege, wollte ich ersteinmal das minimalste das ich mir mit PHP und html vorstellen kann erstellen und von da aus alles weiterentwickeln. Meine Idee war folgende:
Ich lasse das "Echo" von der PHP datei erst einmal ganz normal als String ausgeben mittels Javascript also im prinzip so:

PHP:
...
echo "Hello world";
...

Javascript:
...
var str=Echo von PHP;
console.log(str);
...

Selbst wenn ich das versuche kommt allerdings ein "Kein Element gefunden" und da wollte ich mich mal bei euch schlau machen wo mein Denkfehler ist

Hat einer einen Beispielcode der mein minimales Beispiel macht?

Viele Grüße
Chrisel

SymA · 23. September 2014

Wie schaut dein Code aus?

Cai-pirinha · 23. September 2014

du musst den von php ausgegebenen string im javascript nochmal in anführungszeichen setzen.. sonst steht da ja "var str=Hello world;"...

Chrisel · 23. September 2014

Javascript (Eingebettet in HTML Dokument)

Code:

function test()
{
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    	console.log(xmlhttp.responseText);
    }
  }
xmlhttp.responseText="text";
xmlhttp.open("GET","script.php",true);
xmlhttp.send();
}
test();

PHP (script.php):

Code:

<?php
echo "Hello World";
?>

Also das Problem ist ja ersteinmal überhaupt an den String dranzukommen. Weil so kommt "Kein Element gefunden". Das Graue steht nicht für den String selber sondern soll einfach nur sagen das in str das "Echo" der PHP datei steckt

DaZpoon · 23. September 2014

"Kein Element gefunden" -> Ich denke mal der Firefox benötigt einen DOM Baum. Hast du in deinem HTML schon Elemente ausgegeben?

Chrisel · 23. September 2014

Code:

<!DOCTYPE HTML>
<html>
<head>
<script>
function test()
{
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    	console.log(xmlhttp.responseText);
    }
  }
xmlhttp.responseText="text";
xmlhttp.open("GET","script.php",true);
xmlhttp.send();
}
test();
</script>
</head>
<body>
	<h1>Hallo</h1>
</body>
</html>

Also ist quasi nur minimal HTML weil es darum ja im Prinzip erst viel später geht...

Cai-pirinha · 23. September 2014

hab mich schon gewundert

ich nehme an die dateien sind im selben verzeichnis?

Chrisel · 23. September 2014

Genau

Alles im gleichen Verzeichnis..

DaZpoon · 23. September 2014

fehlt für <script> nicht noch type="text/javascript"?

Chrisel · 23. September 2014

Ja also stimmt eigentlich schon aber irgendwie geht das auch immer so

Aber der Fehler bleibt damit immernoch

Cai-pirinha · 23. September 2014

also wenn ich deinen code so 1:1 kopiere und bei mir auf den server schmeiße, bekomme ich in der console ein "Hello world".. der fehler muss woanders liegen..

DaZpoon · 23. September 2014

Schade :-D

Ich vermute aber mal der aufruf test() kommt zu früh. Schreib das mal in den Body-Tag, sprich onload="test()"

Edit: Verwendest du das lokal oder hast du die Dateien auch auf einem WebServer liegen? Der HttpRequest funktioniert lokal soweit ich weiß nicht.

Chrisel · 23. September 2014

Nicht dein Ernst?

Oh man... Hast du auch beide Datein in einem Verzeichnis? Woran könnte das noch liegen?

Cai-pirinha · 23. September 2014

mein voller ernst

jo, im root. keine ahnung.. permissions?

Speedy. · 23. September 2014

fehlt für <script> nicht noch type="text/javascript"?

Da es sich um HTML5 handelt kann der type nicht angegeben werden.

Der HttpRequest funktioniert lokal soweit ich weiß nicht.

Das Skript muss auf einem (lokalen) Webserver ausgeführt werden, da der XMLHttpRequest nur per HTTP/HTTPS kommuniziert. Wenn du deine HTML-Datei lokal über das file:///index.html öffnest, dann klappt es nicht. Stell also sicher, dass du per http://localhost/index.html auf die Datei zugreifst, oder wie auch immer dein Server heißt.

Bei mir funktioniert der Code auch im Chrome, Firefox und Internet Explorer 11 problemlos und ohne Anpassungen...

Chrisel · 23. September 2014

Also test kommt dann ja anscheinend nicht zu früh wenns bei dir klappt. Habs trotzdem mal verschoben aber klappt trotzdem nicht. Dann hab ich das Verzeichnis nochmal auf jede Festplatte die ich habe verschoben-> immernoch das gleiche Problem. Was Permissions angeht weiß ich nicht genau was das blocken könnte aber eigentlich habe ich alle rechte die man braucht(Admin). Sonst noch Ideen?

Das Skript muss auf einem (lokalen) Webserver ausgeführt werden, da der XMLHttpRequest nur per HTTP/HTTPS kommuniziert. Wenn du deine HTML-Datei lokal über das file:///index.html öffnest, dann klappt es nicht. Stell also sicher, dass du per http://localhost/index.html auf die Datei zugreifst, oder wie auch immer dein Server heißt.

Ok das bedeutet ich muss jetzt einen Server aufsetzen Beispielsweise? Oh man dachte da komm ich drumrum weil ich erstmal nur testen wollte

Cai-pirinha · 23. September 2014

naja, von der server-umgebung bin ich jetzt eigentlich schon ausgegangen

dann haben wir das problem ja schon gefunden..

Chrisel · 23. September 2014

Ja

Vielen Dank für die Hilfe!

Daran hätte ich natürlich nie gedacht dass es gar nicht am Code liegt sondern daran, dass es nicht lokal funktioniert...

Daaron · 23. September 2014

Is dank XAMPP kein Hexenwerk sondern in wenigen Minuten erledigt.
Aber immer brav dran denken: XAMPP ist keine Produktiv-Umgebung, sondern nur für Entwickler gedacht!

T0a5tbr0t · 23. September 2014

Bei sowas macht ein lokaler Testserver viel Sinn, aber der Vollständigkeit halber:
Wenn Ajax von einem file:// URL aus gehen soll, dann kann ein

Code:

header("Access-Control-Allow-Origin: *");

am Anfang der PHP Datei helfen. Damit "überredet" man den Browser die Anfrage durchzulassen.
Google "same origin policy" wenn man den Grund wissen will

JavaScript Simples String ausgeben

Cadet 4th Year

Captain

Lt. Junior Grade

Cadet 4th Year

Commander

Cadet 4th Year

Lt. Junior Grade

Cadet 4th Year

Commander

Cadet 4th Year

Lt. Junior Grade

Commander

Cadet 4th Year

Lt. Junior Grade

Speedy.

Gast

Cadet 4th Year

Lt. Junior Grade

Cadet 4th Year

Fleet Admiral

Lieutenant

Ähnliche Themen