komplettes Formular an Ajax-Script übergeben

Alles, was PHP betrifft, kann hier besprochen werden.

komplettes Formular an Ajax-Script übergeben

Postby kschroeder » 14. March 2008 09:21

Hallo,

bisher habe ich einem Ajax-Script lediglich einzelne Parameter übergeben.
Nun möchte ich aber das gesamte Formular übergeben können.

Wie kann ich dem Script das gesamte Formular übergeben, als ob ich den submit-Button geklickt hätte?


So sieht das Script bis jetzt aus:
Code: Select all
function get_liste2(aktion,id) {
   var req = createXMLHttpRequest();

   req.onreadystatechange = function() {
      switch(req.readyState) {
         case 0:
         case 1:
         case 2:
         case 3: return;
         case 4: break;
      }
      resulttext = req.responseText;
      document.getElementById('Liste').innerHTML = resulttext;
   }
   req.open('get', 'templates/i_fahrten_liste.php?fahrt='+aktion+'&id='+id);
   req.send(null);
}
kschroeder
 
Posts: 254
Joined: 11. May 2007 13:33

Postby Xardas der Dunkle » 14. March 2008 12:50

Fast genau so, nur das du einen post-request machen sollstest und die Daten anstatt an den datei namen anzuhängen, der send-function übergeben:

Code: Select all
req.open('post', 'templates/i_fahrten_liste.php');
req.send('p1=wert&p2=wert&p3=wert');


mfG
User avatar
Xardas der Dunkle
 
Posts: 482
Joined: 09. March 2008 19:40
Location: /var/www

Postby Nobbie » 14. March 2008 13:40

In JavaScript sieht das so aus:

Code: Select all
req.open('post', 'templates/i_fahrten_liste.php');
requestvars = 'p1='+document.Form.p1.value+'&p2='document.Form.p2.value+'&p3='document.Form.p3.value;
req.send(requestvars);


Das ganze gepackt in einen <button onclick='mysend()'>....</button>, damit das Formular nicht doppelt abgeschickt wird (via Ajax/JavaScript und dann noch durch den Submit).
Nobbie
 
Posts: 8770
Joined: 09. March 2008 13:04

Postby kschroeder » 14. March 2008 13:53

Hab ich beides schon gesehen (obwohl oft noch empfohlen wird, den Header mitanzugeben), aber dafür muss ich immer händisch alle Formularfelder einzeln angeben. (Es sei denn, ich bastel mir eine Schleife, die das ganze Formular-Objekt durchgeht, abhängig vom Typ die Werte ermittelt und diese dann in die erforderliche Form bringt.

Ich dachte mir nur, dass ich vielleicht das ganze Formular in einem Rutsch übergeben könnte, ohne dass ich mir Gedanken über Anzahl oder Typ machen muss oder den Monsterstring basteln muss. So wie bei einem normalen Submit eben auch.

Scheint es da tatsächlich keine Lösung zu geben, oder doch?
kschroeder
 
Posts: 254
Joined: 11. May 2007 13:33

Postby Nobbie » 14. March 2008 16:40

kschroeder wrote:Scheint es da tatsächlich keine Lösung zu geben, oder doch?


Zu faul zu suchen oder lieber andere programmieren lassen? Natürlich gibt es dafür eine Lösung, da muss man ein paar Zeilen JavaScript programmieren (im PHP Forum ist das übrigens hier total falsch).

Ich habe mal ein kleines Beispielscript programmiert, da steht alles drin, was Du brauchst:

Code: Select all
<html>
<head>
<title>Willkommen!</title>
<script type="text/javascript">
var request;
function machwas() {

   el = document.formular.elements;
   count = el.length;

   request = document.formular.ausgabe.value = '';

   for (i=0; i < count;i++) {
      if (el[i].value == '' || el[i].type == 'button')
         continue;

      if (request=='')
         request = el[i].name + '=' + el[i].value;
      else
         request = request + '&' + el[i].name + '=' + el[i].value;
   }

   document.formular.ausgabe.value = request;
}
</script>
</head>
<body>
Bitte Formular füllen:

<form name="formular" action="">
<input name="otto" type="text"><br>
<input name="hugo" type="text"><br>
<input name="rama" type="text"><br>
<input name="tobi" type="text"><br>
<input type="button" value="Absenden" onclick="machwas()"><br>
<input name="ausgabe" size=80 type="text" readonly>
</form>
</body>
</html>


Schau es Dir an und baue es so ein, wie Du es brauchst.
Nobbie
 
Posts: 8770
Joined: 09. March 2008 13:04

Postby kschroeder » 14. March 2008 17:54

Nobbie wrote:Zu faul zu suchen oder lieber andere programmieren lassen?


Nein, bin sicherlich nicht zu faul zu suchen oder möchte bestimmt nicht, dass jemand anderes etwas für mich programmiert.
Deinen Lösungsansatz hatte ich ja bereits auch erwähnt:
...ohne dass ich mir Gedanken über Anzahl oder Typ machen muss oder den Monsterstring basteln muss.


Zeigt aber auch, dass ich schon etwas weitergedacht habe, denn Dein Script funktioniert nur mit Standard-Textfeldern. Selectboxen funktionieren nicht mehr und müssten erst über eine Typ-Abfrage lokalisiert werden.

Wie ich gesagt habe, aber ich wiedehole mich gern, finde ich die Javascript-Lösung sehr umständlich und überaus Code-lastig.
Meine Frage ist, ob es eine es möglich ist, mit einem Rutsch ohne Wissen um die Anzahl und Typ der Formularfelder, die Daten and das Script übertragen kann.
...dass ich vielleicht das ganze Formular in einem Rutsch übergeben könnte

Meinetwegen als mehrdimensionales Array, dass im Script wieder auseinandergefummelt wird.

Bin mittlerweile den umständlichen Weg gegangen und habe die Formularfelder manuell angegeben. Offenbar gibts keinen Weg.
Auf Webseiten, die eine Ajax-Dokumentation anbieten steht keine andere Möglichkeit für req.send als angegeben.
kschroeder
 
Posts: 254
Joined: 11. May 2007 13:33

Postby Nobbie » 14. March 2008 20:59

kschroeder wrote:Zeigt aber auch, dass ich schon etwas weitergedacht habe, denn Dein Script funktioniert nur mit Standard-Textfeldern. Selectboxen funktionieren nicht mehr und müssten erst über eine Typ-Abfrage lokalisiert werden.


Ich habe es ja auch nur als Vorlage geschrieben mit allen Attributen, die Du benötigst. Wobei ich nicht sehe, was bei Selectboxen anders sein soll - der Value ist der Value (der selektierte).

kschroeder wrote:Wie ich gesagt habe, aber ich wiedehole mich gern, finde ich die Javascript-Lösung sehr umständlich und überaus Code-lastig.


Die paar popeligen Zeilen sind "umständlich" und "überaus Code-lastig"? Was hast Du denn für Vorstellungen? Ob Du nun in Java die Parameter zusammenbaust oder in PHP wieder auseinanderfrickelst - irgendwas mußt Du doch programmieren. Und eine allgemein Funktion, die aus jedem Formular die Felder mit Wert extrahiert und zusammenbaut, ist doch 100%ig das, was Du brauchst. Die Funktion wird ausgelagert in ein eigenes Modul und in jedem Dokuemnt inkludiert - perfekte Lösung. Die API ist supereinfach, ein simples onSubmit-Event mit einem einzigen Funktionsaufruf - weniger geht gar nicht!

kschroeder wrote:Meine Frage ist, ob es eine es möglich ist, mit einem Rutsch ohne Wissen um die Anzahl und Typ der Formularfelder, die Daten and das Script übertragen kann.


Ja, ist es, aber wenn Du so seltsam fragst, befürchte ich, dass Du den Code gar nicht verstehst. Diese Funktion "weiß nichts" über die Felder, über deren Namen und deren Werte.

kschroeder wrote:...dass ich vielleicht das ganze Formular in einem Rutsch übergeben könnte


Exakt das tut diese Funktion - Du brauchst nur noch die Ajax Requests ans Ende zu schreiben und fertig ist der perfekte allgemeine Aufruf.

kschroeder wrote:Meinetwegen als mehrdimensionales Array, dass im Script wieder auseinandergefummelt wird.


Wie willst Du denn PHP-Arrays - auch noch mehrdimensional - via JavaScript übergeben? Zeig mal die Syntax (völlig losgelöst von Formularen).

kschroeder wrote:Bin mittlerweile den umständlichen Weg gegangen und habe die Formularfelder manuell angegeben.


Was endgültig beweist, dass meine Mühen umsonst waren, Du hast leider nichts verstanden.

kschroeder wrote:Offenbar gibts keinen Weg.


Doch - s.o.

kschroeder wrote:Auf Webseiten, die eine Ajax-Dokumentation anbieten steht keine andere Möglichkeit für req.send als angegeben.


Weiß ich nicht - aber hier im Forum, hier in diesem Thread, da steht der Ansatz für die allgemeine Lösung.

Grausam. Leider.
Nobbie
 
Posts: 8770
Joined: 09. March 2008 13:04

Postby kschroeder » 15. March 2008 10:47

Ich versuchs mal so einfach zu formulieren, dass auch Du es verstehst...

Wenn ich eine Fomular baue und einen Submit button... dann werden automatisch alle Formulardaten an das Script übergeben. Ich muss weiter nichts machen. Im Script liste.php stehen mir alle Formulardaten direkt zur Verfügung. Ich jedenfalls seh da nichts an Javascript, dass den Übergabestring erst Parameter für Parameter zusammenbastelt und übergibt.

Code: Select all
<form name="fahrten" method="POST" action="liste.php">
<input type="text" name="ziel">
</form>


Und meine Frage war, ob das auch für die Übergabe an das Ajax-Script funktioniert.
Ob ich tatsächlich manuell
Code: Select all
i_fahrten_liste.php?fahrt='+aktion+'&id='+id
schreibe oder eine Javascriptfunktion, die mir das abnimmt. Herauskommt ein elend langer String, der von mir erstellt an die Funktion übergeben wird.
Und den ich vorher auch noch selber escapen muss etc.

Bisher habe ich mir per Javascript nur folgendermaßen Werte aus einem Select-Feld geholt:
Code: Select all
      for(i=0;i<document.fahrten.kfz.length;++i) {
         if(document.fahrten.kfz.options[i].selected == true) {
            xkfz = document.fahrten.kfz.options[i].value;
            break;
         }
      }

Sollte es mittlerweile anders funktionieren, dann ist es tatsächlich an mir vorbeigegangen.

Und zu guter letzt, wäre da noch das Problem der maximalen URL-Länge.
Soweit mein Kenntnisstand beträgt die maximale Länge 2048 Zeichen, ich bin aber hier auch schon an die Grenze gestoßen. http://support.microsoft.com/kb/208427/de
Für ein paar Formularfelder ausreichend, aber bei der Verwendung von Textareas in denen nur als Beispiel Vertragsunterlagen stehen, wird es schnell kritisch.

Wie auch immer, Problem umgangen, Aufgabe gelöst und damit ist der Thread hier für mich geschlossen! :!:
kschroeder
 
Posts: 254
Joined: 11. May 2007 13:33

Postby Xardas der Dunkle » 15. March 2008 11:46

Wenn du Daten als post-request sendest, existiert keine maximale URL Länge o_Ô.

Es gibt aber noch ne andere möglichkeit. Du kannst Daten auch in einem eigenen Format übersenden und in php über: file_get_contents("php://input") wieder auslesen.
Das zusammen gefrickle haste dann, aber immer noch ;).

Btw. läuft das bei normalen formularen auch nicht anders, nur das hier der browser dir die Arbeit für das zusammensetzen des strings abnimmt.

PS:
Ob Du nun in Java die Parameter zusammenbaust oder in PHP wieder auseinanderfrickelst [...]

*hust*, JavaScript nicht Java ;), das ist ein riesen Unterschied.
User avatar
Xardas der Dunkle
 
Posts: 482
Joined: 09. March 2008 19:40
Location: /var/www

Postby Nobbie » 15. March 2008 13:33

kschroeder wrote:Ich versuchs mal so einfach zu formulieren, dass auch Wenn ich eine Fomular baue und einen Submit button... dann werden automatisch alle Formulardaten an das Script übergeben. Ich muss weiter nichts machen. Im Script liste.php stehen mir alle Formulardaten direkt zur Verfügung. Ich jedenfalls seh da nichts an Javascript, dass den Übergabestring erst Parameter für Parameter zusammenbastelt und übergibt.


Doppelt bis dreifach falsch. Zunächst werden bei einem POST-Request die Daten vom Browser an Apache gesandt, der startet den PHP Interpreter und dieser fügt für Dich die Daten in Array (ein assoziatives Array) mit dem Namen $_POST. Würdest Du stattdessen beispielsweise mit C-Programmen die CGI Scripts schreiben, so müßtest Du selbst den Datenstrom analysieren.

Weiters: exakt wie in PHP hast Du auch in JavaScript die Variablen in einem Array aufgearbeitet - nahezu 100%ig identisch. Nur: da heißt es nicht $_POST, sondern da JavaScript eine OO-Sprache ist, ist es dort ein Attribut eines Formulars im Document: document.formular.elements - das ist Pendant zu $_POST (oder $_GET oder $_REQUEST). Das ist nun einmal eine andere Sprache und eine andere Syntax.

Bei PHP erhältst Du die Feldinhalte, wenn Du die Namen angibst(!) - beispielsweise $_PHP['feld1']. Das funktioniert in JavaScript identisch, aber nicht vergessen, es ist OO, also muss ein weiteres Attribut herhalten, hier das neue Attribut "value" - das ergibt diese Syntax: document.formular.feld1.value - absolut logisch und semantisch identisch mit $_POST['feld1'].

Bei PHP kann man aber auch, ohne Kenntnis der Feldnamen, die Werte ermitteln, indem man beispielsweise einen Loop programmiert, da gibt es viele Varianten, ich nenne jetzt nur eine, die sieht ungewöhnlich aus, aber ich will sie an die JavaScript Syntax halbwegs annähern:

Code: Select all
<?php
        ....
        $count = count($_POST);
        for ($i = 0;$i < $count;$i++) {
                $name = key($_POST);
                $value = current($_POST);
                ...
                next($_POST);
        }
?>


Mit diesem Code klapperst Du (ohne die Namen der Felder zu kennen), die Variablen in PHP ab. Mit foreach ginge es leichter, aber ich wollte mal mit einem Zähler arbeiten.

Wie die Syntax dafür in JavaScript aussieht, siehst Du im meinem obigen Beispiel - auch dort braucht man die Feldnamen nicht unbedingt zu kennen (obwohl man ja auch direkt mit den Namen zugreifen kann), sondern man kann mit einem ganz ähnlichen Zähler wie das PHP Codebeispiel die Variablen abklappern.

Dabei ist JavaScript sogar PHP überlegen, denn während PHP nur noch den Wert des Feldes kennt, stellt JavaScript außerdem noch den Type zur Verfügung - und ggf. noch mehr Attribute, ich habe jetzt kein Manual zur Hand.

Wie Du siehst, funktioniert in JavaScript die Abarbeitung der Variablen eines Formulars eigentlich identisch wie in PHP.

Das Problem ist, dass Du Dein Problem nicht verstehst: Du willst einen Request abbilden - einen HTTP Request - und dafür die Daten von JavaScript an einen Webserver senden. Das hat mit PHP gar nichts zu tun, denn Du mußt die HTTP Spezifikationen erfüllen, nicht die PHP Spezifikation.

Wenn Du das gleiche Problem in PHP lösen willst, sieht der Ansatz prinzipiell genauso aus: wenn Du mit PHP und der fsockopen()-Funktion einen HTTP-Request ausführen willst, mußt Du genauso für den Request die sog. "URL-Encoded" Variablen aufbereiten, nach dem gleichen Muster (feld1=wert1&feld2=wert2 usw.). Wenn Du dort allerdings die Werte aus einem Formular (sprich: Request) direkt weiterreichen willst, so ginge das aber ausnahmsweise in der Tat leichter, denn PHP selbst hat ja schon die Variablen auch via HTTP-Request bekommen, aber die PHP-Einstiegsroutinen stellen diese Variablen nicht nur als $_POST bzw. $_GET/$_REQUEST zur Verfügung, sondern es gibt auch den ganzen Query-String als einzigen String durchgereicht, das ist die Variable $_SERVER["QUERY_STRING"].

So eine Variable oder Methode bzw. Attribut kennt aber JavaScript nicht (wobei ich davon ausgehe, dass Du da auch noch gar nicht dran gedacht hast betreffend PHP).

Woran liegt das?

Das liegt daran, dass bei einem Request auf einen Webserver der Browser die Form-Variablen in dieses Format bringt und überträgt - und gnädigerweise läßt der PHP-Startcode diesen Querystring 1:1 durch und stellt ihn zur Verfügung.

Bei JavaScript aber wird überhaupt kein HTTP-Request ausgeführt, im Gegenteil, der Browser bekommt das gar nicht mit, es wird ein onSubmit-Event gestartet (bevor der Browser dran ist) innerhalb der JavaScript-Engine und die stellt die Felder NATÜRLICH NICHT URL-Encoded zur Verfügung - das wäre ja auch unsinnig, weil diese Formvariablen so noch zu parsen wären. Stattdessen gibt es die jetzt ja bekannten Objekte document und Formular mit den bekannten Eigenschaften.

Was es ist nicht gibt, ist genau die Funktion, die zu bauen aber wirklich einfach ist, wir haben sie ja quasi fertig, die aus den Formvariablen händisch einen URL-Encoded String bastelt - weil nämlich Ajax nichts anderes ist, als mit JavaScript einen HTTP-Request auszuführen, quasi unter dem Hintern des Browsers.

Ich hoffe, dass Du vielleicht jetzt verstehst, dass es das, was Du vermeintlich vermißt, nicht gibt und nicht geben kann, dass aber die avisierte Lösung standesgemäß ist und Deine Vorstellungen davon, dass in PHP alles einfacher und besser ist, nicht den Tatsachen entspricht. PHP ist eine andere Sprache, hat eine andere Syntax und JavaScript handelt die Formvariablen genau so, wie es das Modell der ObjektOrientierung vorschreibt. Absolut stringent und logisch.

kschroeder wrote:Und zu guter letzt, wäre da noch das Problem der maximalen URL-Länge.
Soweit mein Kenntnisstand beträgt die maximale Länge 2048 Zeichen, ich bin aber hier auch schon an die Grenze gestoßen.


Deswegen sollst Du ja auch nicht GET, sondern POST benutzen, da werden die Parameter nicht via URL übertragen, sondern es wird ein Datenstrom zum Server gesandt.

kschroeder wrote:Wie auch immer, Problem umgangen, Aufgabe gelöst und damit ist der Thread hier für mich geschlossen! :!:


Gelöst hatte ich es bereits - leider hast Du es nur nicht verstanden. Vielleicht verstehst Du es jetzt besser - ich gebe die Hoffnung nicht auf.
Nobbie
 
Posts: 8770
Joined: 09. March 2008 13:04

Postby Xardas der Dunkle » 15. March 2008 14:54

Auch nochmal um es zu zeigen hier wie so ein HTTP-Request bei POST aussieht:
Code: Select all
POST /templates/i_fahrten_liste.php HTTP/1.1
Host: example.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 26
Connection: close

p1=wert1&p2=wert2&p3=wert3


Also siehst du vielleicht, was beim senden dort überhaupt passiert. Der Browser fügt das ganze zu so einem String zusammen und übermittelt ihn dann als Content an den Webserver.

Falls dir dieses Format nicht in den Kram passt, kannst du es auch anders machen und ein eigenes Format wählen, zB. xml (dafür gibt es sogar eine entsprechende Classe in JS und auch in PHP):

Code: Select all
POST /templates/i_fahrten_liste.php HTTP/1.1
Host: example.com
Content-Type: text/xml
Content-Length: {Länge des Datenstromes in Byte}
Connection: close

<?xml version="1.0"?>
<soap>
 <param name="p1" value="wert1" />
 <param name="p2" value="wert2" />
 <param name="p3" value="wert3" />
</soap>


Das ganze kannste dann in PHP wieder auslesen:
PHP 5:
Code: Select all
$xml = simplexml_load_file('php://input');


PHP 4:
Code: Select all
$xml = domxml_open_file('php://input');
User avatar
Xardas der Dunkle
 
Posts: 482
Joined: 09. March 2008 19:40
Location: /var/www


Return to PHP

Who is online

Users browsing this forum: No registered users and 4 guests