• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 831
  • Last Modified:

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
0
Bergstr
Asked:
Bergstr
  • 3
  • 3
  • 3
2 Solutions
 
Gurvinder Pal SinghCommented:
basically you need to pass the data in the send() method as a parameter

var parameters = {
  "q":str;
};
xmlhttp.send(parameters);
0
 
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
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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....
0
 
Gurvinder Pal SinghCommented:
make
var parameters = {"q": str;  };

as

var parameters = {"q": str  };
0
 
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
0
 
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
0
 
Gurvinder Pal SinghCommented:
0
 
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
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 3
  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now