AJAX Text verschicken
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anfrage
apache
ausgabe
code
datei
datum
eingabe
ergebnis
fragezeichen
funktion
http
input
parameter
post
string
test
text
url
zeichen
ziel
-
Hallo,
ich möchte das ein User einen Text schreiben kann und der dann per AJAX an einen PHP geschickt wird, der diesen dann weiterverarbeitet z.B. in einer Datenbank speichert.
Mein Problem dabei ist, dass ich nicht weiß wie ich mit Javascript den Text richtig vorbereite bzw. escape.
Ich hab erstmal bei JS die Funktion escape() benutzt und bei PHP dann htmlspecialchars() aber es kommt trotzdem bei einigem noch zu Fehlern.
Ein "+" wird zu einem Leerzeichen und die Zeichen "§°äüö" bewirken das einfach kein Text mehr angezeigt wird. Das liegt dann anscheinend an htmlspecialchars() weil es wohl nicht damit umgehen kann was bei diesen Zeichen escape() zurückliefert.
<!DOCTYPE html> <html> <head> <title>Textupload</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> ajax = mkXHRObjekt(); function send() { params = "text=" + escape(text_input.value); ajax.open ("post","./AJAX_Weiterverarbeitung.php"); ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); ajax.setRequestHeader("Content-length", params.length); ajax.setRequestHeader("Connection", "close"); ajax.onreadystatechange = responseText; ajax.send(params); } function responseText() { if (ajax.readyState == 4) { text.innerHTML = "<p>" + ajax.responseText + "</p>"; } } function mkXHRObjekt() { var resObjekt = null; try { resObjekt = new XMLHttpRequest(); } catch(Error) { try { resObjekt = new ActiveXObject("MSXML2.XMLHTTP"); } catch(Error) { try { resObjekt = new ActiveXObject("Microsoft.XMLHTTP"); } catch(Error) { alert("Erzeugung des XMLHttpRequest-Objekts nicht möglich"); } } } return resObjekt; } </script> </head> <body> <textarea id="text_input"></textarea> <button onclick="send()">Verschicken</button> <hr> <div id="text"> </div> </body> </html>
<?php if (isset($_POST['text'])) { echo nl2br(htmlspecialchars($_POST['text'])); } ?>
Demo:
http://studentenreiten-marburg.lima-city.de/Uebungen/AJAX_Textupload.html
Danke im Voraus
EDIT:
Mir ist gerade aufgefallen das es sich bei dem Lima-Server anders verhält da tauchen schwarze ?-Caros auf
Ich benutze Apache 2.4.3 mit PHP 5.4.7 und Windows
Beitrag zuletzt geändert: 7.1.2013 16:11:54 von studentenreiten-marburg -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hallo,
hast du es schonmal mit der PHP Funktion mysql_real_escape_string versucht? Damit könntest du alle Zeichen, die in einer Datenbankabfrage nichts zu suchen haben, herausfiltern.
Zu den Fragezeichen-Rauten: Ich glaube, das sind nur Zeichen dafür, dass da ein unbekanntes Zeichen hinkommt.
MFG THWBM -
Warum nicht so?
PHP:<?php if($_SERVER['REQUEST_METHOD'] == 'POST') { $text = file_get_contents('php://input'); echo(nl2br(htmlspecialchars($text))); }
JS:request.open("POST", 'script.php', false); request.setRequestHeader("Content-Type", "text/plain;charset=UTF-8"); request.send(text);
Dabei muss
bereits einrequest
, die Seite als UTF-8 gespeichert und inXMLHttpRequest
der zu sendende Text enthalten sein.text -
oder so
Datei: test.html ..... mit Formular(e) und AJAX Javascript
<html> <head> <title>AJAX Request GET POST Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript"> // ----------------------------------------------------------------------- function ajax_request(query='', method='post', requrl='ajax_info.php') { var ajxhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari ajxhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 ajxhttp = new ActiveXObject("Microsoft.XMLHTTP"); } ajxhttp.onreadystatechange=function() { if (ajxhttp.readyState==4 && ajxhttp.status==200) { document.getElementById("myDiv").innerHTML=ajxhttp.responseText; } } var millisec = new Date().getTime(); var parameters = "q=" + query + "&mst=" + millisec + ""; if (method == 'post') { ajxhttp.open("POST", requrl, true); ajxhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); ajxhttp.setRequestHeader("Connection", "close"); ajxhttp.send(parameters); } else { var geturl = requrl + "?" + parameters; ajxhttp.open("GET", geturl, true); ajxhttp.send(); } } // ----------------------------------------------------------------------- </script> </head> <body> <div id="info"> <h2>AJAX Request (GET + POST) Example</h2> <p>--- <a href="test.html">HOME (reset)</a> --- </p> </div> <br> <br> <form name="form1" method="post" action=""> <p>(Test 1 = POST) <br> Eingabe: <input type="text" name="eingabe1" value=""> <button type="button" onclick="ajax_request(document.form1.eingabe1.value,'post')">Change Content 1</button> </p> </form> <br> <br> <form name="form2"> <p>(Test 2 = GET) <br> Eingabe: <input type="text" name="eingabe2" value=""> <button type="button" onclick="ajax_request(document.form2.eingabe2.value,'get')">Change Content 2</button> </p> </form> <br> <br> <div id="myDiv" style="padding:8px; background:#EEEECC;"> <p>... The AJAX Result ...</p> </div> <br> <br> </body> </html>
... Textfeld-Eingabe per Ajax Senden + Ergebnis-Ausgabe (ohne Browser-Reload)
... Beispiele jeweils zu POST und GET ... siehe Javascript Funktion: ajax_request()
....Ausgabe: Inhalt der Ergebnis-Seite ajax_info.php (zum DEBUG ... siehe unten)
Datei: ajax_info.php
<?php // ---------------------------------------------------- $rmethod = $_SERVER["REQUEST_METHOD"] if ($rmethod == 'POST') { $debug = $_POST; } else { $debug = $_GET; } // ---------------------------------------------------- print "<br />\n"; print "<br />" . $rmethod . "\n"; print "<br />\n"; print "<pre style=\"margin:4px; padding:6px; background:#DEDEDE; text-align:left;\">\n"; print_r($debug); print "</pre>\n"; print "<br />\n"; print "<br />\n"; // ---------------------------------------------------- ?>
diese komplette Ausgabe der "Ziel-Seite" (ajax_info.php) wird dann über JavaScript
auf der test.html im Element
ausgegeben<div id="myDiv">...</div>
Anstatt DEBUG Ausgabe in der Datei, an welche die GET oder POST Anfragen gesendet wurden,
kann man auf der "Ziel-Seite" (ajax_info.php) ja auch "mehr" mit den "empfangenen" Daten machen, also z.B. formartierte Ausgabe (HTML) oder weitere Daten zum Request abfragen oder speichern (MySQL) oder Weiterleitung oder etc.
Beitrag zuletzt geändert: 7.1.2013 19:01:52 von ktowxl -
@hackyourlife
Das ist ja wunderbar :) Ich wusste gar nicht das es solche Streams gibt, funktioniert einwandfrei, jetzt muss ich nur noch richtig durchblicken^^
Vielen Dank!
@ktowxl
Da hab ich doch immer noch das gleiche Problem, wenn ich z.B. ein & Übertrage denkt er das währe der nächste Parameter
Trotzdem auch ein dank an dich ;)
Beitrag zuletzt geändert: 8.1.2013 14:30:11 von studentenreiten-marburg -
studentenreiten-marburg schrieb:
Normalerweise wird ein String mit dem Format "x-www-form-urlencoded" als Content bei einer POST-Anfrage mitgeschickt. Dieser wird von PHP geparst und als
… jetzt muss ich nur noch richtig durchblicken^^
zur Verfügung gestellt. Du kannst dir diesen Schritt aber sparen und den Content der Anfrage direkt auslesen, indem du von$_POST
liest wo der Apache die Daten weiterleitet. Dies ist in PHP der Streamstdin
.php://input
studentenreiten-marburg schrieb:
Du müsstest statt
… wenn ich z.B. ein & Übertrage denkt er das währe der nächste Parameter
die Funktionescape()
in JavaScript nutzen um den Parameter zu escapen, dann würde es auch so funktionieren.encodeURIComponent() -
Okay super diese andere Funktion war eigentlich was ich suchte aber deine Lösung ist noch besser ;)
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
