AJAX / PHP - Pass variables using POST?

I currently have the following piece of code working - passing a GET request to another page, and that second page can pick up the variable:

Page 1 AJAX code:

<script type="text/javascript">
function StockCodeInfo(str)
 {
 var xmlhttp;
 if (str=="")
   {
   document.getElementById("StockCodeInfo").innerHTML="";
   return;
   }
 if (window.XMLHttpRequest)
   {// code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
   }
 else
   {// code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
 xmlhttp.onreadystatechange=function()
   {
   if (xmlhttp.readyState==4 && xmlhttp.status==200)
     {
     document.getElementById("StockCodeInfo").innerHTML=xmlhttp.responseText;
     }
   }
 xmlhttp.open("GET","ajax/stockcodeinfo.php?q="+str,true);
 xmlhttp.send();
 }
 
 </script>




Page 2 - , get the variable and display it:

<?php
 $q=$_GET["q"];
 echo $q;
 ?>

How do I do that exact same thing using the post method - i'm failing to see how the variables get passed through?

I've had a quick google and i can see that the following lines need changing:

 xmlhttp.open("GET","ajax/stockcodeinfo.php?q="+str,true);
 xmlhttp.send();

obviously GET is replaced with POST - the URL loses the q= and the +str goes - but how are the POST variables actually passed?

Thanks
BergstrAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Gurvinder Pal SinghCommented:
basically you need to pass the data in the send() method as a parameter

var parameters = {
  "q":str;
};
xmlhttp.send(parameters);
BergstrAuthor Commented:
That looks like what im after but it doesnt seem to be working - heres the updated code that im using:

<script type="text/javascript">
function StockCodeInfo(str)
 {
 var xmlhttp;
 if (str=="")
   {
   document.getElementById("StockCodeInfo").innerHTML="";
   return;
   }
 if (window.XMLHttpRequest)
   {// code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
   }
 else
   {// code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
 xmlhttp.onreadystatechange=function()
   {
   if (xmlhttp.readyState==4 && xmlhttp.status==200)
     {
     document.getElementById("StockCodeInfo").innerHTML=xmlhttp.responseText;
     }
   }
 var parameters = {"q": str;  };

 xmlhttp.open("POST","ajax/stockcodeinfo.php",true);
 xmlhttp.send(parameters);
 }
 
 </script>

In dreamweaver it says: there is a syntax error on line 37 (which is the new line) and when that script runs in a browser, it doesnt return any data at all from the new page (which it was doing previously - just not with the variables)

Any idea where thats gone wrong?

Thanks
OWASP Proactive Controls

Learn the most important control and control categories that every architect and developer should include in their projects.

BuggyCoderCommented:
i don't understand why you want to write in javascript when there is a better alternative in JQuery and that too with too less code...

Try giving it a thought....
Gurvinder Pal SinghCommented:
make
var parameters = {"q": str;  };

as

var parameters = {"q": str  };
BergstrAuthor Commented:
OK - That line is fixed - but its now failing as soon as I change:

 xmlhttp.send();

to:

 xmlhttp.send(parameters);

- as soon as that line is changed it stops loading the second page again?

Buggycoder - i'm sure there are others ways to do this, but at the moment id simply like to get the code I already have working - at the moment i dont want to look at something completely new - I will take a look at it though :) Thanks for the info
BuggyCoderCommented:
Glad that i was able to help you to learn something new.
Anyways here is how to post using xmlhttprequest object:-

var url = "get_data.php";
var params = "lorem=ipsum&name=binny";
http.open("POST", url, true);

//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");

http.onreadystatechange = function() {//Call a function when the state changes.
	if(http.readyState == 4 && http.status == 200) {
		alert(http.responseText);
	}
}
http.send(params);

Open in new window


Refer here For Furthur Details:-
http://www.openjs.com/articles/ajax_xmlhttp_using_post.php
http://www.devx.com/DevX/Tip/17500

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Gurvinder Pal SinghCommented:
BergstrAuthor Commented:
The last 2 posts combined got me the result i was after :)

gurvinder372 - the parameter you mentioned was correct:

var parameters = "q="+str;


Buggycoder - i noticed on one of your links it mentions that you must add the http request header for the post function to work - without that i was getting no results at all.

Here is the final code im using for reference:

 xmlhttp.onreadystatechange=function()
   {
   if (xmlhttp.readyState==4 && xmlhttp.status==200)
     {
     document.getElementById("StockCodeInfo").innerHTML=xmlhttp.responseText;
     }
   }

var params = "q="+str;


 xmlhttp.open("POST","ajax/stockcodeinfo.php",true);
 
 //Send the proper header information along with the request
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");

 xmlhttp.send(params);
 }
 
 </script>

Thanks very much for the help
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
AJAX

From novice to tech pro — start learning today.