[jQuery AJAX] echo mit HTML Content von PHP Datei ausgeben?

4 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

Indem du das div, was du in dem submit.php anzeigst gleich renderst ohne textuellen Inhalt und dann in der success Methode des Ajax-Calls den innerText des Elements änderst. Dazu sollte das natürlich auch eine Id haben, damit du es ansprechen kannst.

Wenn nicht immer etwas ausgegeben werden soll und nur im Fehlerfall, dann kannst du natürlich auch das Element dynamisch erstellen via createElement. Ein leeres Element mit einem   hat dann aber den Vorteil, dass das Layout nicht umgebrochen wird bzw. die Meldung den vorhandenen Content nach unten schiebt.

Woher ich das weiß:Beruf – Softwareentwickler/Projektleiter seit 2012

Hmm.. Okay. Könntest Du das anhand eines Codes zeigen?

MfG

0
@Ollig00
Indem du das div, was du in dem submit.php anzeigst gleich renderst ohne textuellen Inhalt
<form id="myForm">
  <input type="email" name="mail" id="mail" placeholder="E-Mail Adresse"/>
  <input type="submit" name="check" id="check" value="Senden"/>
</form>
<div role="alert" id="form-message">&nbsp;</div>
und dann in der success Methode des Ajax-Calls den innerText des Elements änderst.
success: function(data) {
  document.getElementById('form-message').innerText = data;
}

In der submit.php gibst du dann nicht mehr das div mit aus, sondern nur den gewünschten Text.

Alternativ kannst du das auch über HTTP Codes abbilden und dann ohne zurückgegebene Daten in der success oder error Funktion abbilden. Finde es aber so korrekter, da der Request ja funktioniert hat.

0
@apachy

Hmm.. Sieht logisch aus. Ich versuche es mal und gebe bescheid, ob das geklappt hat.

0
@apachy

Okay, eine andere Frage... Wenn ich das so wie Du geschrieben hast, mache, dann würde das standardmäßig auf meiner Seite so aussehen: https://prnt.sc/pu5p8w

Und nach dem Senden so: https://prnt.sc/pu5puq

Gibt es da die Möglichkeit, die Box erst dann sichtbar zu machen, nachdem der Text angezeigt wird?

Das Element wäre:

<div class="alert alert-warning" role="alert" id="warning-message">&nbsp;</div>

Btw. Deine Lösung funktioniert! :)

0
@Ollig00

Okay. Ich habe eine Möglichkeit gefunden. Nun funktioniert alles.

Lösung:

  success: function (data) {                                   $("#warning-message").html("<div class='alert alert-success' role='alert'></div>");
   }
0

Ich würde das ganze ohne PHP machen. Du kannst die Email per JS evaluieren und das Formular nur dann abschicken, wenn die Felder gültig sind.

Woher ich das weiß:Berufserfahrung
In dieser wird überprüft, ob die E-Mail gültig ist

Mach das doch mit

<input type=email ...>

Alex

Hallo Alex,

danke für deine Antwort. Diese Lösung ist leider nicht das, was ich brauche. Klar, das wird dann seitens HTML überprüft, aber es gibt auch Entwickler, die die Page Source bearbeiten und aus type="email" ein type="text" machen. Deshalb soll das ganze per PHP überprüft werden, was dann der Anwender nicht ändern kann, weil das ja serverseitig ist.

Das eigentliche Problem war ja jQuery AJAX. Die Lösung ist in einem Kommentar unter dem Beitrag von apachy.

Trotzdem danke!

0
@Ollig00
Klar, das wird dann seitens HTML überprüft, aber es gibt auch Entwickler, die die Page Source bearbeiten und aus type="email" ein type="text" machen.

Ja und? Diese "Entwickler", die vorsätzlich eine falsche Mail-Adresse eingegeben habe, wundern sich dann aber auch nicht, wenn sie keine Bestätigungs-Mail, keine Login-Daten, keinen Newsletter oder dgl. erhalten.

Ist aber okay, wenn Du dennoch daran festhältst.

Für andere Leser jedoch der Hinweis: Es ist stets ausgemachter Unsinn, eine eingegebene Mail-Adresse serverseitig (mit Rückgabe) syntaktisch zu validieren, da in diesem Fall mehrere unnötige Requests gesendet werden, was die ganze Anwednung unnötig verlangsamt. Wenn man überhaupt eine serverseitige Validierung einsetzt, dann nur so, dass diese nach dem Absenden des Formulares das gesamte ('ausgefüllte) Formular wieder aufruft. AJAX so aunzuwenden wie im o. g. Beispiel ist hier aber stets die falsche Lösung.

0

Da der Code von der HTML Datei nicht so übersichtlich aussieht, hier das ganze via Hastebin: https://hastebin.com/owidabides.xml

Woher ich das weiß:Studium / Ausbildung – Fachinformatiker für Anwendungsentwicklung

Was möchtest Du wissen?