[PHP/AJAX] POST data komt niet door - Softwareontwikkeling

maandag 24 juli 2006 16:48

Acties:

Topicstarter

Na het doorlezen van wat A.J.A.X. tutorials ben ik begonnen aan een login form.
Helaas wil mn postdata niet doorkomen.

De (x)HTML en Javascript code

index.html

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>Asynchronous Javascript (and XML) - POST Test</title>
    <script type="text/javascript">
    
    // Creert XMLHTTP Object
    
    function createRequestObject() {
        var ro;
        var browser = navigator.appName;
        
        if(browser == "Microsoft Internet Explorer"){
            ro = new ActiveXObject("Microsoft.XMLHTTP");
        }else{
            ro = new XMLHttpRequest();
        }
        return ro;
    }

    var xmlhttp = createRequestObject();
    
    // Formvalues uitlezen
    
    function getFormValues(obj) {
    var queryStr = "";
    for (i = 0; i < obj.childNodes.length; i++) {
        if (obj.childNodes[i].tagName == "input") {
            if (obj.childNodes[i].type == "text" || obj.childNodes[i].type == "hidden" ) {
               queryStr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
            }
            if (obj.childNodes[i].type == "checkbox") {
               if (obj.childNodes[i].checked) {
                  queryStr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
               } else {
                  queryStr += obj.childNodes[i].name + "=&";
               }
            }
            if (obj.childNodes[i].type == "radio") {
               if (obj.childNodes[i].checked) {
                  queryStr += obj.childNodes[i].name + "=" + obj.childNodes[i].value + "&";
               }
            }
        } 
        if (obj.childNodes[i].tagName == "select") {
            var sel = obj.childNodes[i];
            queryStr += sel.name + "=" + sel.options[sel.selectedIndex].value + "&";
        }
    }
    
    queryStr = queryStr.substr(0, (queryStr.length - 1));
    return queryStr;    
    }
    
    // Afhandelen readyStates
    
    function handler() {
      if (xmlhttp.readyState == 4) {
         if ( xmlhttp.status == 200) {
            alert(xmlhttp.responseText);
         } else {
            alert("Connectie mislukt");
         }
      }
    }
    
    // Inloggen
    
    function doLogin(frmObj) {
    
        var url = "post.php";
        var data = getFormValues(frmObj);
        xmlhttp.onreadystatechange = handler;
        xmlhttp.open("POST", url, true);
        xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
        xmlhttp.send(data);
    
    }
    
    </script>
</head>

<body>
        
        <form>
        
            <input type="text" name="userName" /> <br/>
            <input type="text" name="userPass" /> <br/>
            
            <br/>
            
            <input type="button" value="Login" onclick="doLogin(this.parentNode)" />
        
        </form>

</body>
</html>

De code in post.php

PHP:

<?php

    echo "Login geslaagd! \n\n";
    
    print_r($_POST);
    
?>

Allemaal niet zo spannend dus.. Helaas komt de data toch echt niet door.
De fout lijkt in het getFormValues gedeelte te liggen, een handmatige Querystring
komt wel goed door.

[ Voor 11% gewijzigd door Kvn op 24-07-2006 17:01 ]

maandag 24 juli 2006 16:51

Acties:

Verwijderd

Misschien deze spatie die er teveel staat?

code:

1	sel.options[sel.selectedIndex ]

maandag 24 juli 2006 17:00

Acties:

Kvn

Topicstarter

Even aangepast, helaas zat daar de bug fout niet in... Toch bedankt

[ Voor 9% gewijzigd door Kvn op 24-07-2006 17:01 ]

maandag 24 juli 2006 17:10

Acties:

The_Light

De controles in de functie getFormValues zijn case sensitive. Je moet dus even van bijvoorbeeld input, INPUT maken.

maandag 24 juli 2006 17:30

Acties:

Kvn

Topicstarter

Eh mn Javascript code en html zijn beide lowercase

maandag 24 juli 2006 20:38

Acties:

André

Analytics dude

En zo dan?

HTML:

function doLogin(frmObj)
{
  var url = "post.php";
  var data = getFormValues(document.forms[frmObj]);
  xmlhttp.onreadystatechange = handler;
  xmlhttp.open("POST", url, true);
  xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
  xmlhttp.send(data);
}
</script>

<form>
  <input type="text" name="userName" /> <br/>
  <input type="text" name="userPass" /> <br/>
  <br/>
  <input type="button" value="Login" onclick="doLogin('formulier')" />
</form>

Ander zou je de functie getFormValues eens moeten debuggen.

/edit:
En wat The_Light bedoel: in js geeft tagName hoofdletters terug

Dus in het geval van een input geeft hij "INPUT" terug.

[ Voor 11% gewijzigd door André op 24-07-2006 20:40 ]

maandag 24 juli 2006 21:54

Acties:

crisp

Devver

Pixelated

Enkel een doctype maakt het nog geen XHTML; in echt XHTML zou de tagName wel lowercase zijn geweest bij het uitvragen in javascript.

Overigens vind ik de code erg rommelig en slordig en op sommige punten zelfs incorrect; ik zal eens kijken of ik zo dadelijk een 'nette' versie kan maken ter leering ende vermaeck

Intentionally left blank

maandag 24 juli 2006 21:57

Acties:

Kvn

Topicstarter

Hmm prima, maar dan wil ik toch wel weten wat hier 'niet' XHTML aan is. Immers, de pagina valideerd toch zeker als XHTML Strict, waarom zou dit dan niet zo zijn?

maandag 24 juli 2006 22:16

Acties:

crisp

Devver

Pixelated

Kvn schreef op maandag 24 juli 2006 @ 21:57:
Hmm prima, maar dan wil ik toch wel weten wat hier 'niet' XHTML aan is. Immers, de pagina valideerd toch zeker als XHTML Strict, waarom zou dit dan niet zo zijn?

Omdat validatie enkel iets zegt over syntax, een browser bepaald echter aan de hand van het mime-type welke parser hij gebruikt. Als je een document verstuurd met het text/html mimetype dan zal een browser het dus gewoon als HTML behandelen (en error-correctie toepassen waar nodig aangezien XHTML syntax vaak niet valid HTML syntax is).

Ik zeg daarom ook altijd: als je een XHTML document als HTML verstuurd dan is het een HTML document met verkeerde DOCTYPE - blijkbaar heb je dan ook geen XHTML nodig en heb je dus een verkeerde keuze gemaakt

Intentionally left blank

maandag 24 juli 2006 22:24

Acties:

Kvn

Topicstarter

Als niemand je erop wijst dat het op deze manier fout is, kan je ook geen verkeerde keuze maken

Dus bij deze, bedankt!

Overigens vind ik de gehele syntax van XHTML een stuk prettiger, en bovendien netter. Ik ga dan ook gewoon verder zo

maandag 24 juli 2006 23:31

Acties:

crisp

Devver

Pixelated

Hier een voorbeeld van hoe ik het aan zou pakken; by no means compleet en houd ook geen rekening met eventuele character-encoding (zou bij UTF-8 ook geen probleem mogen zijn), dus puur als voorbeeld. Je ziet hier ook dat ik de Ajax-functionaliteit non-obtrusive heb gemaakt; als een client geen Ajax-ondersteuning of helemaal geen javascript-ondersteuning biedt wordt er een gewone POST gedaan:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <title>Asynchronous Javascript (and XML) - POST Test</title>
    <script type="text/javascript">

    //-- wrapper for IE
    if (!window.XMLHttpRequest)
    {
        window.XMLHttpRequest = function()
        {
            var types = [
                'Microsoft.XMLHTTP',
                'MSXML2.XMLHTTP.5.0',
                'MSXML2.XMLHTTP.4.0',
                'MSXML2.XMLHTTP.3.0',
                'MSXML2.XMLHTTP'
            ];
    
            for (var i = 0; i < types.length; i++)
            {
                try
                {
                    return new ActiveXObject(types[i]);
                }
                catch(e) {}
            }
    
            return undefined;
        }
    }

    // Formvalues uitlezen
    function createQueryString(frmObject)
    {
        var query = '', queryElements = [];
        var frmEl, i = 0;

        // loop through all form-elements
        while ((frmEl = frmObject.elements[i++]))
        {
            // only active elements that have a non-empty name-attribute
            if (frmEl.name && !frmEl.disabled)
            {
                query = frmEl.name + '=';
                switch (frmEl.tagName.toLowerCase())
                {
                    case 'input':
                        switch (frmEl.type)
                        {
                            case 'text':
                            case 'hidden':
                                query += encodeURIComponent(frmEl.value);
                                break;
                            case 'checkbox':
                            case 'radio':
                                if (!frmEl.checked) continue;
                                if (frmEl.hasAttribute('value'))
                                    query += encodeURIComponent(frmEl.value);
                                else
                                    query += 'on';
                                break;
                            case 'submit':
                            case 'reset':
                            case 'button':
                            default:
                                // not implemented
                                continue;
                        }
                        break;
                    case 'select':
                        if (frmlEl.multiple)
                        {
                            // not implemented
                            continue;
                        }
                        else
                        {
                            if (frmEl.options[frmEl.selectedIndex].hasAttribute('value'))
                                query += encodeURIComponent(frmEl.options[frmEl.selectedIndex].value);
                            else
                                query += encodeURIComponent(frmEl.options[frmEl.selectedIndex].text);
                        }
                        break;
                    case 'button':
                    default:
                        // not implemented
                        continue;
                }

                queryElements.push(query);
            }
        }

        return queryElements.join('&');
    }

    // Inloggen
    function doLogin(frmObj)
    {
        var url = frmObj.action;
        var data = createQueryString(frmObj);
        var xmlhttp = new XMLHttpRequest();
        if (xmlhttp)
        {
            // closure!
            xmlhttp.onreadystatechange = function()
            {
                if (xmlhttp.readyState == 4)
                {
                    if (xmlhttp.status == 200)
                    {
                        alert(xmlhttp.responseText);
                    }
                    else
                    {
                        alert('Connectie mislukt');
                    }
                }
            }

            xmlhttp.open('POST', url, true);
            xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
            xmlhttp.send(data);

            // cancel form submit
            return false;
        }
        else
        {
            alert('Not Ajax-capable, trying normal form-submit');
        }

        return true;
    }

    </script>
</head>

<body>
    <form action="http://localhost/login.php" onsubmit="return doLogin(this)">
        <fieldset>
            <legend>Login form</legend>
            <label for="userName">Username: </label><input type="text" name="userName" id="userName">
            <label for="userPass">Password: </label><input type="text" name="userPass" id="userPass">
            <input type="submit" value="Login">
        </fieldset>
    </form>
</body>
</html>

Kvn schreef op maandag 24 juli 2006 @ 22:24:
Als niemand je erop wijst dat het op deze manier fout is, kan je ook geen verkeerde keuze maken
Dus bij deze, bedankt!

Overigens vind ik de gehele syntax van XHTML een stuk prettiger, en bovendien netter. Ik ga dan ook gewoon verder zo

Tsja, in HTML kan je ook netjes coden - qua syntax zijn de verschillen verder ook niet zo groot behalve dat je sommige elementen in HTML geen close-tag hebben. Vertrouwen op error-correctie van browsers (welke niet gedefinieerd is voor HTML) vind ik op z'n minst onverstandig. Daarbij loop je het risico dat wanneer je besluit om je XHTML ook echt als XHTML te gaan versturen er toch zaken anders blijken te zijn waardoor je document niet eens een werkend XHTML-document blijkt te zijn.
Je neemt enkel jezelf in de maling als je XHTML verstuurd als HTML

Intentionally left blank

maandag 24 juli 2006 23:50

Acties:

aex351

I am the one

Er zijn simpele javascript libs op het internet te downloaden waarmee je deze process kan versimpelen. Zelf het wiel uitvinden is natuurlijk ook leuk, maar het is maar een idee voor je huidige probleem.

< dit stukje webruimte is te huur >

maandag 24 juli 2006 23:56

Acties:

crisp

Devver

Pixelated

aex351 schreef op maandag 24 juli 2006 @ 23:50:
Er zijn simpele javascript libs op het internet te downloaden waarmee je deze process kan versimpelen. Zelf het wiel uitvinden is natuurlijk ook leuk, maar het is maar een idee voor je huidige probleem.

Inderdaad, maar veel van deze script-libraries zijn ook incompleet of incorrect

Intentionally left blank

dinsdag 25 juli 2006 00:10

Acties:

aex351

I am the one

crisp schreef op maandag 24 juli 2006 @ 23:56:
[...]

Inderdaad, maar veel van deze script-libraries zijn ook incompleet of incorrect

Klopt ik deel die mening, ik code daarom ook veel zelf en heb de neiging open source projecten van mij af te schuiven. Maar libs als prototype kan je heel goed op bouwen.

Als licht gewicht ajax libary gebruik ik momenteel nu netlobo http://www.netlobo.com/ajax_function.html .

< dit stukje webruimte is te huur >

dinsdag 25 juli 2006 00:13

Acties:

crisp

Devver

Pixelated

aex351 schreef op dinsdag 25 juli 2006 @ 00:10:
[...]

Klopt ik deel die mening, ik code daarom ook veel zelf en heb de neiging open source projecten van mij af te schuiven. Maar libs als prototype kan je heel goed op bouwen.

Als licht gewicht ajax libary gebruik ik momenteel nu netlobo http://www.netlobo.com/ajax_function.html .

Zowel prototype als de library die jij noemt verwachten dat de POST-body al kant-en-klaar wordt aangeleverd en kan deze niet vanuit een form samenstellen

offtopic:
zie ik daar allemaal eval()'s?

[ Voor 4% gewijzigd door crisp op 25-07-2006 00:14 ]

Intentionally left blank

dinsdag 25 juli 2006 00:25

Acties:

aex351

I am the one

crisp schreef op dinsdag 25 juli 2006 @ 00:13:
[...]

Zowel prototype als de library die jij noemt verwachten dat de POST-body al kant-en-klaar wordt aangeleverd en kan deze niet vanuit een form samenstellen

offtopic:
zie ik daar allemaal eval()'s?

Wat bedoel je precies met de POST-body al kant en klaar moet worden aangeleverd ten opzichte van wat de topic starter precies wilt.

< dit stukje webruimte is te huur >

dinsdag 25 juli 2006 09:38

Acties:

crisp

Devver

Pixelated

aex351 schreef op dinsdag 25 juli 2006 @ 00:25:
[...]

Wat bedoel je precies met de POST-body al kant en klaar moet worden aangeleverd ten opzichte van wat de topic starter precies wilt.

Het samenvoegen van de form-data om uiteindelijk in je Ajax-request op te sturen:

JavaScript:

1	xmlhttp.send(data);

Intentionally left blank