✔ XMLHttpRequest

[Umbriell]

Hi,


ich versuche leider vergebens per javascript Daten über PHP aus einer Datenbank zu holen.

Im JS steht folgendes:

function getmess(id) {
    var message = 'Nichts gefunden';    
    var request = new XMLHttpRequest();
    request.open('post', 'mess.php', true);
    request.setRequestHeader('Content-Type', 'application/x-www-formurlencoded');
    request.send('id='+id);
    request.onreadystatechange = function() {
         message=request.responseText;
    }
    return message;
}

Den Inhalt wollte ich mir an anderer Stelle so ausgeben lassen:

document.getElementById('messagein').value= getmess(id);

Die id kann ich mir ausgeben lassen und die Ausgabe stimmt auch mit dem Erwarteten überein.

In der PHP Datei steht folgender Code:

<?php
include 'connect.php';
if(isset($_POST['id'])){
   $id = $_POST['id'];
   $return = 'Keine Nachricht gefunden';
   
   $query = "SELECT * FROM messages WHERE id = $id";
        $result = mysqli_query($con, $query);
        if($row = mysqli_fetch_assoc($result)){
            $return = $row['message'];
        }
}
   echo $return;
?>

Ich habe leider keine Ahnung wieso es keine Ausgabe gibt. Schreibe ich im JS statt 'return message' 'return 'Hallo Welt' wird der Wert ausgegeben. Es passt also irgendwas mit der Abfrage nicht. Kann jemand den/die Fehler entdecken?

Besten Dank im Voraus!

VG
Umbriell

 

[SpiceLab]

Ein Versuch ist es wert...

Wie verhält es sich anstelle von

document.getElementById('messagein').value = getmess(id);

mit

document.getElementById('messagein').innerHTML = getmess(id);

 

[Umbriell]

Hi,

besten Dank für die Antwort. Leider ändert sich am Ergebnis nichts.
Ich habe das Problem oben nicht richtig beschrieben, wie mir gerade auffällt. Die Ausgabe lautet "Nichts gefunden", wie bei der Deklarierung der Variabel vorgegeben. Die Frage muss also sein, wieso der Wert der Variabel nicht verändert wird. Die ID ist korrekt und auch in der DB vorhanden. Sorry für die unkonkreten Angaben.

VG
Umbriell

 

[SpiceLab]

Ich würde sagen, dass da im JS ab Zeile 8 eine if else-Bedingung eingeschoben gehört.

http://www.w3schools.com/xml/dom_httprequest.asp

 

[Sempervivum]

Ajax arbeitet asynchron, d. h. der Request wird an den Server gesendet und später trifft die Antwort ein und der Handler für onreadystatechange wird aufgerufen. D. h. in deiner Funktion getmess() ist message noch nicht verfügbar. Du musst alle Aktivitäten, die die Antwort vom Server brauchen, im Handler für onreadystatechange durchführen:

function getmess(id) {
    var message = 'Nichts gefunden';  
    var request = new XMLHttpRequest();
    request.open('post', 'mess.php', true);
    request.setRequestHeader('Content-Type', 'application/x-www-formurlencoded');
    request.send('id='+id);
    request.onreadystatechange = function() {
         message=request.responseText;
         document.getElementById('messagein').value= message;
    }
    return message;
}

 

[Umbriell]

Hi,

besten Dank für die Antworten.
Das die Antwort abgewartet werden muss, bevor sie ausgegeben kann habe ich eingesehen. Danke für den Tipp. Es klappt jetzt soweit, dass sich die Variabel durch den PHP-Teil ändert.
Scheinbar stimmt aber mit dem "POST" noch was nicht. Im PHP-Teil wird die IF-Abfrage "if(isset($_POST['id']))" als false behandelt. Bei einem Test ist er in den else-Teil gesprungen.

Hat noch jemand einen Tip was da noch falsch ist?

Besten Dank im Voraus!

VG
Umbriell

 

[Sempervivum]

Habe mal dies ergooglet:
http://stackoverflow.com/questions/9713058/send-post-data-using-xmlhttprequest
und das setRequestHeader entspr. geändert:

           var message = 'Nichts gefunden';
           var request = new XMLHttpRequest();
           request.open('post', 'testpost.php', true);
           var params = "name=xxx";
           request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
           request.onreadystatechange = function () {
               if(request.readyState == 4 && request.status == 200) {
                   message = request.responseText;
                   console.log(message);
               }
           }
           request.send(params);

Damit erkennt er offenbar die POST-Parameter. Ich würde dir empfehlen, lieber jQuery für Ajax zu verwenden, damit ist das Handling viel einfacher und übersichtlicher.

 

[Umbriell]

Hi,

besten Dank. Ich habe Deinen code übernommen und angepasst:

            var message = 'Nichts gefunden';
            var request = new XMLHttpRequest();
            request.open('post', 'mess.php', true);
            var params = "id="+id;
            request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            request.onreadystatechange = function () {
                message = request.responseText;
                document.getElementById('messagein').value= message;
            }
            request.send(params);

So läuft es jetzt ohne Warn- oder Fehlermeldungen.

Mit jQuery habe ich mich bisher kaum beschäftigt. Das muss ich dann nachholen, wenn die Grundlagen bei mir vorhanden sind und ich ein gewisses Maß an Verständnis für das ganze entwickelt habe.

Jetzt muss ich erstmal schauen, warum es jetzt geht und mit dem "alten" Code nicht.
Nochmals vielen Dank für Deine Hilfe.

VG
Umbriell

 

[Sempervivum]

warum es jetzt geht und mit dem "alten" Code nicht.

Der entscheidende Fehler war, dass ein "-" in dem Parameter für setRequestHeader fehlte:
Vorher: "application/x-www-formurlencoded"
Nachher: "application/x-www-form-urlencoded"

 

[Sempervivum]

Ich empfehle, dieses:

if(request.readyState == 4 && request.status == 200)

beizubehalten, weil der Callback ein paar Mal triggert, wenn noch keine Antwort vorhanden ist.