Solved

AJAX / PHP - Pass variables using POST?

Posted on 2012-03-28
9
736 Views
Last Modified: 2012-03-28
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
Comment
Question by:Bergstr
  • 3
  • 3
  • 3
9 Comments
 
LVL 20

Expert Comment

by:BuggyCoder
ID: 37776012
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 37776026
basically you need to pass the data in the send() method as a parameter

var parameters = {
  "q":str;
};
xmlhttp.send(parameters);
0
 

Author Comment

by:Bergstr
ID: 37776107
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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
LVL 20

Expert Comment

by:BuggyCoder
ID: 37776122
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
 
LVL 40

Expert Comment

by:gurvinder372
ID: 37776223
make
var parameters = {"q": str;  };

as

var parameters = {"q": str  };
0
 

Author Comment

by:Bergstr
ID: 37776268
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
 
LVL 20

Accepted Solution

by:
BuggyCoder earned 250 total points
ID: 37776294
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
 
LVL 40

Assisted Solution

by:gurvinder372
gurvinder372 earned 250 total points
ID: 37776303
0
 

Author Comment

by:Bergstr
ID: 37776370
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Part of the Global Positioning System A geocode (https://developers.google.com/maps/documentation/geocoding/) is the major subset of a GPS coordinate (http://en.wikipedia.org/wiki/Global_Positioning_System), the other parts being the altitude and t…
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to count occurrences of each item in an array.

825 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question