Page 1 of 1

How to send data by POST method with AJAX

Posted: Wed Mar 15, 2006 2:32 am
by mesutsahin
AJAX method..
I want to send POST data to a php document(xajax.php)
But I couldn't do it.
I have a form like this

Code: Select all

<form id="form1" name="form1" method="post">
<input type="text" value="ozkan" name="ad" id="ad"/>
<input id="buton" type="submit" onClick="return trigger();" value="Send" />
</form>
When I press the button, I want it to run xajax.php and print what I send into div element.
I know it can be done easily by the other methods for example directly sending form to the xajax.php. but I will use this method in some complicated applications. So I have to learn how to send it with ajax.
If I use get method, there is no problem. But when I use post it didn't give any result. I couldn't find any example about sending data with post.

this is javascript code to send data.

Code: Select all

var req;
function loadXMLDoc(method,url,p) {
    req = false;
    // branch for native XMLHttpRequest object
    if(window.XMLHttpRequest) {
        try {
            req = new XMLHttpRequest();
        } catch(e) {
            req = false;
        }
    // branch for IE/Windows ActiveX version
    } else if(window.ActiveXObject) {
        try {
            req = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e) {
            try {
                req = new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e) {
                req = false;
            }
        }
    }
    if(req) {
        req.onreadystatechange = processReqChange;
        req.open(method, url, true);
        req.send(p);
    }
}
function processReqChange() {
    // readyState - if it's respond
    if (req.readyState == 4) {
        // if there is no error
        if (req.status == 200) {
				document.getElementById("kutu").innerHTML=req.responseText;
				document.getElementById("buton").disabled=false;
        } else {
            alert(req.statusText);
        }
    }
	else{
				document.getElementById("kutu").innerHTML="Please wait..";
				document.getElementById("buton").disabled=true;
		}
}
function trigger(){
		var url="xajax.php?xyz=klm";
		loadXMLDoc("POST",url,"email=asd");
		return false;
}
this is the xajax.php
this is just example.

Code: Select all

header ("Cache-Control: no-cache, must-revalidate"); 
header ("Pragma: no-cache");  

for($i=0;$i<=100000;$i++){$ik=$i;}
echo "<br>GET: ";
print_r($_GET);
echo "<br>POST: ";
print_r($_POST);
please help me?

Posted: Wed Mar 15, 2006 4:04 am
by Weirdan
Your POST request lacks Content-type and Content-length headers, here how it would work:

Code: Select all

var req;
function loadXMLDoc(method,url,p) {
    req = false;
    // branch for native XMLHttpRequest object
    if(window.XMLHttpRequest) {
        try {
            req = new XMLHttpRequest();
        } catch(e) {
            req = false;
        }
    // branch for IE/Windows ActiveX version
    } else if(window.ActiveXObject) {
        try {
            req = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e) {
            try {
                req = new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e) {
                req = false;
            }
        }
    }
    if(req) {
/////  =========== [added]  ===================
        if(method == 'POST') {
            req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            req.setRequestHeader('Content-length', p.length);
            req.setRequestHeader('Connection', 'close');
        }
/////  =========== [/added]  ===================
        req.onreadystatechange = processReqChange;
        req.open(method, url, true);
        req.send(p);
    }
}

Posted: Wed Mar 15, 2006 4:34 am
by mesutsahin
when I added the lines you send, it gave me the following error. I didn't understand why.

Code: Select all

Ajax
http://localhost/sunucu/test/ajax.php
Event thread: click
Unhandled exception: [Object InternalException]
I have changed my form like below.
There is no form any more. There is only one button.

Code: Select all

<input id="buton" type="button" value="Gonder" onClick="trigger();" />

Posted: Wed Mar 15, 2006 5:05 am
by Weirdan
err... what browser do you use?

Posted: Wed Mar 15, 2006 5:51 am
by mesutsahin
opera 8
ie 6.0
firefox 1.5