Formular per POST und GET mit html,php,mysql,js,ajax,prototype

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Formular per POST und GET mit html,php,mysql,js,ajax,prototype

    Hi, ich bin Schüler und arbeite derzeit an einem Projekt für einen realen Kunden. Teil des Auftrages ist ein Backoffice Bereich, welchen ich im großen und ganzen schon in php und html realisiert habe. Nun strebe ich eine ajax lösung an. Zu meiner freude komme ich schnell voran doch nun stehe ich vor einem Problem, welches ich auch nach vielem Googlen,Codeschnipsel ausprobieren nicht lösen kann.

    Nun zu meinem Problem:
    Zurzeit generiere ich mithilfe einer übergeordneten PhP Funktion Seiten(beschrenken sich auf einfache Tabellen und Formulare). Diese hole ich mir mit Ajax und schreibe den Inhalt einfach in ein div. Alle möglichen Übergaben laufen bei mir über die URL, da es ein Backoffice Bereich ist und der Kunde damit kein Problem hat nicht weiter Tragisch. Nun gibt es aber Formulare, welche eine zu große Menge an Daten übertragen, dass ich sie nicht mit der URL übergeben kann. Des weiteren wll ich verhindern, dass Datenbankeintäge mittels URL aufruf erstellt werden können.

    in meiner index.html, in der alles geladen wird (tabellen, formulare, usw) rufe ich einfach zu beginn die funktion startCheck auf, welche mir die Seite mit hilfe der daten in der url aufbaut

    Quellcode

    1. Event.observe(document, 'dom:loaded', startCheck);


    ich unterscheide zwischen zwei ajax aufrufen post/get (ich verwende einen post request wenn ich in der url &sup finde)

    global.js

    Quellcode

    1. function startCheck()
    2. {
    3. var url_menue = "../new/menuelinks.php"
    4. if(document.URL.indexOf("test")!==-1)
    5. {
    6. new Ajax.Updater("incontent","../new/test.php",{
    7. method: "post",
    8. parameter:"name=text"
    9. })
    10. }
    11. else
    12. {
    14. if(document.URL.indexOf("?")!==-1){
    15. var location = false
    16. var menue = false
    17. var uebergabe = false
    18. var superior = false
    20. var parameters=document.URL.split("?").last().split("&")
    21. parameters.each(function(parameter)
    22. {
    24. if(!parameter.startsWith("http"))
    25. {
    26. var para = parameter.split("=")
    28. switch (para.first())
    29. {
    30. case "loc":
    32. if(para.last().indexOf(",")===-1)
    33. {
    34. location = para.last()
    35. }
    36. else
    37. {
    38. if(para.last().split(",").last()=="")
    39. {
    40. location = para.last().split(",").last()
    41. }
    42. else
    43. {
    44. location = para.last().split(",").first()+"/"+para.last().split(",").last()
    45. }
    46. }
    47. break
    48. case "men":
    49. if(para.last().indexOf(",")===-1)
    50. {
    51. menue = "menue="+para.last()
    52. }
    53. else
    54. {
    55. if(para.last().split(",").last()=="")
    56. {
    57. menue = "menue="+para.last().split(",").first()
    58. }
    59. else
    60. {
    61. menue = "menue="+para.last().split(",").first()+"&pfad="+para.last().split(",").last()
    62. }
    63. }
    64. break
    66. case "ueb":
    67. if(para.last().indexOf(",")===-1)
    68. {
    69. uebergabe = "id="+para.last()
    70. }
    71. else
    72. {
    73. if(para.last().split(",").last()=="")
    74. {
    75. uebergabe = "id="+para.last().split(",").first()
    76. }
    77. else
    78. {
    79. uebergabe = "id="+para.last().split(",").first()+"&table="+para.last().split(",").last()
    80. }
    81. }
    82. break
    83. case "sup":
    84. superior = true
    85. break
    86. }
    87. }
    88. })
    90. if(location)
    91. {
    92. if(location.indexOf("/")===-1)
    93. {
    94. var url = "../"+location+"/"+location+".php"
    95. }
    96. else
    97. {
    98. var url = "../"+location+".php"
    99. }
    100. if(uebergabe)
    101. {
    102. url+="?"+uebergabe
    103. }
    104. }
    105. if(url)
    106. {
    107. if(superior===true)
    108. {
    109. //DEBUG->
    110. alert("in superior")
    111. alert(Form.serialize("Form"))
    112. //<-DEBUG
    113. new Ajax.Updater("incontent",url,{
    114. method: 'post',
    115. parameters: Form.serialize("Form"),
    116. //DEBUG->
    117. onFailure: function(){alert("Fehler")},
    118. onLoading: function(){alert("loading")},
    119. onSuccess: function(){alert("geschafft")}
    120. //<-DEBUG
    121. })
    122. }
    123. else
    124. {
    125. new Ajax.Updater("incontent", url, {
    126. method: 'get'
    127. })
    128. }
    129. }
    130. else{alert("Kritischer Fehler! Bitte kontaktieren Sie Mich =)")}
    131. if(menue){url_menue+="?"+menue}
    132. }
    133. if (url_menue){
    134. new Ajax.Updater("menuelinks",url_menue,{
    135. method: 'get'
    136. })}else{
    137. alert("Kritischer Fehler! Bitte kontaktieren Sie Mich =)")}
    138. }}
    Alles anzeigen

    in meiner Funktion habe ich momentan einige debug zeilen (gekennzeichnet)
    Zeile(110) alert("in superior") wird wie gewünscht ausgeführt
    Zeile(111) alert(Form.serialize("Form")) nicht -> ich erwarte einen string als rückgabewert

    ids wie Form und incontent sind überprüft

    ich hoffe das gepostete reicht für eine ausreichende analyse, bei bedarf poste ich gerne auch weitere code details


    edit: viele versuche später habe das problem auf folgende codezeile eingegrenzt:
    parameters: Form.serialize("Form"),

    kann mir bitte jemand sagen wo hierbei mein denkfehler liegt habe diese zeile schon anderswo verwendet

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von OliverBuchmann ()

  • Hi,
    du solltest die Daten übrigens besser als Object Hash, statt als String übergeben: prototypejs.org/api/form/serialize
    As of Prototype 1.5 the preferred form of passing parameters to an Ajax request is with an object hash. This means you should pass true for the optional argument. The old behavior (serializing to string) is kept for backwards-compatibility.


    Aber das tut nichts zum Problem.. wie ist denn die ID des Formulars?
    Ich würds mal probieren mit $('id_des_formulars').serialize()

    Sauber programmiert macht es u.U. aber auch Sinn in den onsubmit Handler einzugreifen und das Formular mit Referenz auf this zu übergeben.
    Weitere Informationen zu dem Vorgehen findest du unter [wiki]Formulare mit AJAX.. und ohne[/wiki]

  • Hi, vielen dank erstmal für die schnelle antwort

    den lösungsansatz mit $('id_des_formulars').serialize()
    habe ich auch schon versucht

    mit dem onsubmit handler habe ich es zuvor probiert ist ebenfalls gescheitert

    das mit hash ist eine gute idee werde ich machen(ist ja nur eine zeile) löst jedoch mein problem nicht :(

    edit:
    so habe nun gänzlich auf eventhandler umgebaut nun ergibt sich jedoch ein problem:

    der eventhandler sieht so aus:

    Quellcode

    1. document.observe('dom:loaded', function () {
    3. // Die Problemabfrage
    5. if($('submitButton')!=null){
    6. alert("SubmitButton vorhanden "+$('submitButton'))
    7. }
    8. else
    9. {
    10. alert("submitButton nicht vorhanden")
    11. }
    14. /*var submitButton = $('submitButton')
    15. Event.observe(submitButton, 'click', function(){
    16. alert("buh")
    17. });*/
    19. // fängt den link ab und führt ein httprequest aus (benögtigt falls javascript deaktiviert)
    20. $$('.directmenuelink').each(function(item) {
    21. Event.observe(item, 'click', function(event){
    22. Event.stop(event);
    23. var href = item.readAttribute('href');
    24. getPage(href);
    25. });
    26. });
    27. // bei klick auf einen Menuelink (ein Menue aus divs deren kinder links sind) wird ein httprequest ausgeführt mit der url des kindes
    28. $$('.menuelink').each(function(item) {
    29. Event.observe(item, 'click', function(event){
    30. var href = item.firstChild.href
    31. getPage(href);
    32. });
    33. });
    34. });
    Alles anzeigen


    wenn ich die seite aufrufe bekommte ich wie gewünscht
    alert("submitButton nicht vorhanden")
    da dieser Button noch nicht vorhanden ist

    nun lade ich in einem div mittels ajax ein formuar, dort gibt es so ein element mit der id('submitButton')
    die abfrage ob es diese gibt wird jedoch nicht mehr gestartet.
    kann ich das event dom:loaded irgendwie reloaden oder so

    warum ich diese abfrage brauche und nicht einfach ein event.observe mache?
    durch das nicht vorhandensein des elements mit der id "submitButton" bricht mein script ab und die restlichen events werden nicht abgefragt

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von OliverBuchmann2 ()