Bergstr
asked on
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("S tockCodeIn fo").inner HTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.X MLHTTP");
}
xmlhttp.onreadystatechange =function( )
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("S tockCodeIn fo").inner HTML=xmlht tp.respons eText;
}
}
xmlhttp.open("GET","ajax/s tockcodein fo.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/s tockcodein fo.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
Page 1 AJAX code:
<script type="text/javascript">
function StockCodeInfo(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("S
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.X
}
xmlhttp.onreadystatechange
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("S
}
}
xmlhttp.open("GET","ajax/s
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/s
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
basically you need to pass the data in the send() method as a parameter
var parameters = {
"q":str;
};
xmlhttp.send(parameters);
var parameters = {
"q":str;
};
xmlhttp.send(parameters);
ASKER
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("S tockCodeIn fo").inner HTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.X MLHTTP");
}
xmlhttp.onreadystatechange =function( )
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("S tockCodeIn fo").inner HTML=xmlht tp.respons eText;
}
}
var parameters = {"q": str; };
xmlhttp.open("POST","ajax/ stockcodei nfo.php",t rue);
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
<script type="text/javascript">
function StockCodeInfo(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("S
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.X
}
xmlhttp.onreadystatechange
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("S
}
}
var parameters = {"q": str; };
xmlhttp.open("POST","ajax/
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
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....
Try giving it a thought....
make
var parameters = {"q": str; };
as
var parameters = {"q": str };
var parameters = {"q": str; };
as
var parameters = {"q": str };
ASKER
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
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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("S tockCodeIn fo").inner HTML=xmlht tp.respons eText;
}
}
var params = "q="+str;
xmlhttp.open("POST","ajax/ stockcodei nfo.php",t rue);
//Send the proper header information along with the request
xmlhttp.setRequestHeader(" Content-ty pe", "application/x-www-form-ur lencoded") ;
xmlhttp.setRequestHeader(" Content-le ngth", params.length);
xmlhttp.setRequestHeader(" Connection ", "close");
xmlhttp.send(params);
}
</script>
Thanks very much for the help
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
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("S
}
}
var params = "q="+str;
xmlhttp.open("POST","ajax/
//Send the proper header information along with the request
xmlhttp.setRequestHeader("
xmlhttp.setRequestHeader("
xmlhttp.setRequestHeader("
xmlhttp.send(params);
}
</script>
Thanks very much for the help
http://www.misfitgeek.com/2011/05/calling-web-service-page-methods-with-jquery/
http://brijbhushan.net/2011/05/29/call-httphandler-from-jquery-pass-data-and-retrieve-in-json-format/
http://api.jquery.com/jQuery.post/
http://www.queness.com/post/328/a-simple-ajax-driven-website-with-jqueryphp