XMLHttpRequest with post [SOLVED]

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
Moocat
Forum Contributor
Posts: 143
Joined: Wed Oct 12, 2005 9:28 am
Location: USA

XMLHttpRequest with post [SOLVED]

Post 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! :)
Last edited by Moocat on Thu Nov 10, 2005 5:08 pm, edited 2 times in total.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post 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.
User avatar
Moocat
Forum Contributor
Posts: 143
Joined: Wed Oct 12, 2005 9:28 am
Location: USA

Post 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.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post 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');
User avatar
Moocat
Forum Contributor
Posts: 143
Joined: Wed Oct 12, 2005 9:28 am
Location: USA

Post 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?
User avatar
Moocat
Forum Contributor
Posts: 143
Joined: Wed Oct 12, 2005 9:28 am
Location: USA

Post 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 :)
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post 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);
User avatar
onion2k
Jedi Mod
Posts: 5263
Joined: Tue Dec 21, 2004 5:03 pm
Location: usrlab.com

Post by onion2k »

Slight tangent .. would it be possible to upload a file using POST and XMLHttpRequest?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

technically, it's possible.. but painful to do.. highly not recommended.
Post Reply