Page 1 of 1

XMLHttpRequest with post [SOLVED]

Posted: Wed Nov 09, 2005 9:55 am
by Moocat
I'm just getting into AJAX and I've figured out generally how to work with it and the GET method, but being the paranoid person I am, I want to try and get the POST method working as well. I haven't been able to figure it out though, here is my code:

Code: Select all

var http = createRequestObject();

function sndReq(action) {
    http.open('post', 'rpc.php');
    http.onreadystatechange = handleResponse;
	http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
    http.send(action);
}
It's sending a variable to the next page with a parameter name of 'POST_DATA' and the correct value (action = foo) but I can't seem to interpret the variable correctly on the next page. I would also like to figure out how to name the paramater name something other than 'POST_DATA' if possible. Here is my last try at getting the results:

Code: Select all

<?
switch($_POST['POST_DATA']) {
	case 'foo':
		echo "foo|<img src=alucard.jpg>";
		break;
	case 'foo2':
		echo "foo|foo2 yeah";
		break;
	case 'foo3':
		echo "foo|foo3 woot";
		break;
}
?>
Thanks for any/all help! :)

Posted: Wed Nov 09, 2005 10:31 am
by Weirdan
Ajax: Getting started wrote: Note that if you want to POST data, you have to change the MIME type of the request using the following line:

http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

Otherwise, the server will discard the POSTed data.

Posted: Wed Nov 09, 2005 11:10 am
by Moocat
I tried this:

Code: Select all

var http = createRequestObject();

function sndReq(action) {
    http.open('post', 'rpc.php');
    http.onreadystatechange = handleResponse;
    http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
    http.send(action);
}
and this

Code: Select all

var http = createRequestObject();

function sndReq(action) {
    http.open('post', 'rpc.php');
    http.onreadystatechange = handleResponse;
    http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
    http.send(action);
}
I have no doubt I'm missing something here :)

P.S. This is the error I'm getting from the javascript console:

"Error: document.getElementById(update[0]) has no properties
Source File: http://localhost/tests.php
Line: 37"


Here is the code from that area:

Code: Select all

function handleResponse() {
    if(http.readyState == 4){
        var response = http.responseText;
        var update = new Array();

        if(response.indexOf('|' != -1)) {
            update = response.split('|');
            document.getElementById(update[0]).innerHTML = update[1];
        }
    }
}
I'm not sure which area the error is actually occuring though.

Posted: Wed Nov 09, 2005 1:30 pm
by Weirdan
add

Code: Select all

alert(update.join(' || '));
to make sure the update array is filled correctly

btw, 'post' should be capitalized, thus:

Code: Select all

http.open('POST', 'rpc.php');

Posted: Thu Nov 10, 2005 7:28 am
by Moocat
You are right, I'm not catching the data sent correctly. Here is the PHP I have for the 'action' page:

Code: Select all

<?
switch($_POST['POST_DATA']) {
	case 'foo':
		echo "foo|foo moot";
		break;
	case 'foo2':
		echo "foo|foo2 yeah";
		break;
	case 'foo3':
		echo "foo|foo3 woot";
		break;
	default:
		echo "foo|foo4 default";
		break;
}
?>
It only catches on the default (which I have just put in). I have 3 links which pass in the different variables which I can get to work with GET or REQUEST but the name for the post data eludes me. Looks like this should be the last pointer I need, suggestions?

Posted: Thu Nov 10, 2005 9:25 am
by Moocat
Yah, I figured it out!

I had to pass the variable through the JS as follows:

Code: Select all

http.send('name=' + action);
After doing that I could easily read it on the PHP side using the normal:

Code: Select all

switch($_POST['name']) {
Thanks for all your help :)

Posted: Thu Nov 10, 2005 9:33 am
by Burrito
that's correct. You'll need to send mulitiple parameters the same way you would a get string as well.

ex:

Code: Select all

var postString = "var1="+jsvar1+"&var2=someString&var3="+jsvar3;
http.send(postString);

Posted: Thu Nov 10, 2005 11:25 am
by onion2k
Slight tangent .. would it be possible to upload a file using POST and XMLHttpRequest?

Posted: Thu Nov 10, 2005 2:31 pm
by feyd
technically, it's possible.. but painful to do.. highly not recommended.