Forum » Javascript » [AJAX] Alle POST's weergeven.

  1. F0rex

    Beste mensen,

    Ik ben me gaan verdiepen in AJAX. Ik heb nu een script gevonden waarmee ik een PHP POST kan gebruiken in AJAX. Zodat de pagina niet helemaal opnieuw hoeft worden geladen.

    Nu komt het; Ik kan maar 1 POST weergeven. Als ik zoals in php de POST's wil weergeven werken ze niet. Het moet waarschijnlijk in een loop worden gezet in het script. Weet iemand van jullie hoe?

    Ik wil dus bijv: een formulier maken met voornaam achternaam etc. En daarna alle POST's echo'en.

    Code
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    



    <html>
    <head>
    <title>AJAX POST</title>
    <script type="text/javascript">
     
    var time_variable;
     
    function getXMLObject()  //XML OBJECT
    {
       var xmlHttp = false;
       try {
         xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")  // For Old Microsoft Browsers
       }
       catch (e) {
         try {
           xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")  // For Microsoft IE 6.0+
         }
         catch (e2) {
           xmlHttp = false   // No Browser accepts the XMLHTTP Object then false
         }
       }
       if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
         xmlHttp = new XMLHttpRequest();        //For Mozilla, Opera Browsers
       }
       return xmlHttp;  // Mandatory Statement returning the ajax object created
    }
     
    var xmlhttp = new getXMLObject();    //xmlhttp holds the ajax object
     
    function ajaxFunction() {
      var getdate = new Date();  //Used to prevent caching during ajax call
      if(xmlhttp) { 
      
         var txtname = document.getElementById("ajax");
        xmlhttp.open("POST","blaat.php",true); //calling testing.php using POST method
        xmlhttp.onreadystatechange  = handleServerResponse;
        xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xmlhttp.send("ajax=" + txtname.value); //Posting txtname to PHP File
      }
    }
     
    function handleServerResponse() {
       if (xmlhttp.readyState == 4) {
         if(xmlhttp.status == 200) {
           document.getElementById("message").innerHTML=xmlhttp.responseText; //Update the HTML Form element 
         }
         else {
              alert("Error: POST mislukt. Probeer opnieuw.");
             document.getElementById("message").innerHTML=xmlhttp.send("ERROR");
           
         }
       }
    }
    </script>
    <body>
    <?


     
     
    if(isset($_POST['ajax']))
     {
          echo 
    print_r($_POST);
         if(!empty(
    $_POST['ajax']))
        {
            echo 
    'welkom, '.$_POST['ajax'];
        }
        else
        {    echo 
    'Mislukt';
        
        }
        
    }
    else
    {
     
     
    ?>
    <div id="message" name="message"></div> 
    <form>
    <table>
         <tr>
              <td>Naam:</td>
              <td><input type="text" id="ajax" name="voornaam" /></td>
         </tr>
        <tr>
              <td>Achternaam:</td>
              <td><input type="text" id="ajax" name="achternaam" /></td>
         </tr>
         <tr>
              <td colspan="2"><input type="button" value="Submit" onclick="ajaxFunction();" /></td>
         </tr> 
    </table>
    </form>
    <? ?>
    </body>
    </head>
    </html>



    Kunnen jullie dit oplossen?

    Bewerkt door F0rex op di 14-04-2009 om 20:16
    di 14-04-2009 om 20:15
Reacties (8)

Reageren
  1. Tim

    :\')

    Je wilt nu dus dezelfde pagina ophalen met ajax als waar het hele formulier opstaat?
    Dat gaat al niet werken, want dan haal je namelijk alle HTML van het hele form erbij op. (Tenzij je natuurlijk de html hide op het moment dat je het met ajax ophaalt, maar dat is een beetje omslachtig).
    Je moet de data naar een andere pagina verzenden/ophalen, de data die je van het request dan terug krijgt kan je verwerken met JS en bv een foutmelding geven...

    di 14-04-2009 om 20:18
  2. F0rex

    ok, ik heb de php nu in een andere document staan. Maar nu nog steeds weergeeft die maar 1 POST als print_r($_POST); toepas ?

    di 14-04-2009 om 20:21
  3. Tim

    Quote: f0rex
    ok, ik heb de php nu in een andere document staan. Maar nu nog steeds weergeeft die maar 1 POST als print_r($_POST); toepas ?
    Mja, je post ook maar één ding:

    Code
    1
    
       xmlhttp.send("ajax=" + txtname.value);

    Bewerkt door Tim op di 14-04-2009 om 20:26
    di 14-04-2009 om 20:25
  4. F0rex

    klopt, als ik er nog 1 aanmaak werkte het ook niet. Dus vandaar. Maar is het niet mogelijk, dat er een loop komt die alle POST's herkent? Want als ik dit script vaker wil implementeren moet ik het elke keer aanpassen.


    xmlhttp.send("voornaam=" + txtname.value); //Posting txtname to PHP File
    xmlhttp.send("achternaam=" + txtname.value); //Posting txtname to PHP File

    als ik dit doe bijv: werkt het ook niet,


    OK: nu vond ik zoiets via google: xmlhttp.send("voornaam=" + txtname.value + "&achternaam=" + txtname.value);

    moet het zo? Als ik dit doe werkt het niet helemaal. Nu herkent die de post achternaam wel maar onjuiste value

    Bewerkt door F0rex op di 14-04-2009 om 20:32
    di 14-04-2009 om 20:27
  5. Tim

    Quote: f0rex
    klopt, als ik er nog 1 aanmaak werkte het ook niet. Dus vandaar. Maar is het niet mogelijk, dat er een loop komt die alle POST's herkent? Want als ik dit script vaker wil implementeren moet ik het elke keer aanpassen.
    Code
    1
    
    xmlhttp.send("ajax=" + txtname.value + '&tekst=' + tekst.value + '&postzoveel=' + element.value);


    Dat wordt het dan (heb maar willekeurige dingen opgegeven).

    En is heel makkelijk te fixen, gewoon functie eroverheen oid:
    Code
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    

    formatForPOST = function(Arr)
     {
       var New = [];
       for(var $i in Arr)
        New[] = encodeURI($i)+'='+encodeURI(Arr[$i]);

       return New.join('&');
     }

    var Post = [];
    Post['naam'] = Naam.value;
    Post['bericht'] = Bericht.value;

    xmlhttp.send(formatForPOST(Post));



    Bijvoorbeeld, ff snel getypt, weet niet of die werkt...

    Quote: f0rex
    OK: nu vond ik zoiets via google: xmlhttp.send("voornaam=" + txtname.value + "&achternaam=" + txtname.value);

    moet het zo? Als ik dit doe werkt het niet helemaal. Nu herkent die de post achternaam wel maar onjuiste value
    Je moet natuurlijk wel het value van het goede object opvragen hea, anders krijg je verkeerde waardes ja...

    Bewerkt door Tim op di 14-04-2009 om 21:14
    di 14-04-2009 om 20:32
  6. F0rex

    ok, dat is dus een raadsel voor me hehe

    maar ik heb het nu wel werkende alleen moet ik elke POST defineren in AJAX, helaas. Maar ik ga wel even klooien met die code die je stuurde.

    Heel erg bedankt Tim

    Topic, MAG gesloten worden.

    di 14-04-2009 om 20:38
  7. Tim

    Quote: f0rex
    ok, dat is dus een raadsel voor me hehe

    maar ik heb het nu wel werkende alleen moet ik elke POST defineren in AJAX, helaas. Maar ik ga wel even klooien met die code die je stuurde.

    Heel erg bedankt Tim

    Topic, MAG gesloten worden.
    Mja, daarom is het ook JS hea.

    Je zou wel alle elementen in een form bij elkaar kunnen rapen met JS en dan versturen. Als je tenminste van plan bent altijd formulieren te gebruiken.

    Code
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    
    getForm = function(FormNaam)
     {
       var El = document.forms[FormNaam].elements;

       var New = [];
       for(var $i = 0; $i < El.length; $i++)
        {
          var Obj= El[$i];
          var Type = (typeof(Obj.type) == 'string') ? Obj.type.toLowerCase() : 'text';
          if(typeof(Obj.name) == 'string')
           New[Obj.name] = (Type == 'checkbox' || Type == 'radio') ? Number(Obj.checked) : Obj.value;

         return New;
        }
     }

    xmlhttp.send(formatForPOST(getForm('Form')));



    Zoiets...
    Quote: f0rex
    Heel erg bedankt Tim
    Sure, np It's what I do...

    Bewerkt door Tim op di 14-04-2009 om 21:32
    di 14-04-2009 om 21:01
  8. F0rex

    kijk dat is wat duidelijker

    thanks

    di 14-04-2009 om 21:16
Reageren