Helpful Information
 
 
Category: Ajax and Design
AJAX Noob

Alright I'm new to ajax but I wanted to know how to go about this using POST I can't find examples and the ones I look at show I'm doing this right but it doesnt seem to be working maybe someone can catch my error.


Index


<html>
<head>

<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!

try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxPlayers = document.getElementById('ajaxPlayers');
ajaxPlayers.innerHTML = ajaxRequest.responseText;
}
}

var limit = document.getElementById('limit').value;

ajaxRequest.open("POST", "players.php", true);
ajaxRequest.send(limit);
}

//-->
</script>
</head>


<body>

<form method=POST>
<table align='center'>
<tr>
<td>
Max Limit:
</td>
<td>
<input type='text' id='limit' onChange=''>
</td>
</tr>
<tr>
<td colspan=2>
<input type='button' value='Retrieve' onClick='ajaxFunction()'>
</td>
</tr>
</table>
</form>

<div id='ajaxPlayers'>Your Results</div>
</body>
</html>




players.php


<?

include("config.php");

$limit = $_POST['limit'];
echo "limit: $limit";


$query = mysql_query("SELECT * FROM `accounts` ORDER BY `id` ASC LIMIT $limit");

echo("<table>");
while($row = mysql_fetch_array($query))
{
$id = $row['id'];
$username = $row['username'];
$password = $row['password'];
$email = $row['email'];

echo("
<tr>
<td>
$id
</td>

<td>
$username
</td>

<td>
$password
</td>

<td>
$email
</td>
</tr>
");
}
echo("</table> <br> Posts:");

print_r($_POST);
?>



I want to get the limit to pass through but it just doesnt post any ideas?

Does it really need to be done using POST? Personally I would use GET and do it the following way:


ajaxRequest.open("GET", "players.php?limit=" + limit, true);

Then just make the appropriate change in the PHP file.

If it's absolutely necessary for it to be done using POST then sorry for not being much help there.

its okay, its not necessary I'm doing this as a learning experience, yeah I know how to do it with GET it's successful with that I just want to learn how to do it with POST as said previously :-\. thanks though

with a POST request you have to send the parameters separating them from the url. so you create a variable in which you place the values from your form


var parameters = "limit=" + encodeURI( document.getElementById("limit").value );

and in the request you add these lines


...
ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajaxRequest.setRequestHeader("Content-length", parameters.length);
ajaxRequest.setRequestHeader("Connection", "close");
ajaxRequest.send(parameters);


haven't tested it with your program, but you should work it now without any problem...

i was using this to post name-value pairs to a php script

you can add onblur="ajaxFunction(this.id,this.value)" to your forms input fields so they can validate in real time. I had div elements with id's the same as their corrosponding form field but with an x infront (i read somewhere not to give things the same id). hope this helps anyone...



function ajaxFunction(id,value){
var ajaxRequest;//ajax var

try{// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
}catch(e){//Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){// Something went wrong
return false;
}
}
}

ajaxRequest.onreadystatechange = function(){//handle response
if(ajaxRequest.readyState == 4){
document.getElementById("x"+id).innerHTML = ajaxRequest.responseText;
}
}
var infoToSend = encodeURI("id="+id+"&value="+value);
ajaxRequest.open("POST", "server.php", true);
ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajaxRequest.setRequestHeader("Content-length", infoToSend.length);
ajaxRequest.setRequestHeader("Connection", "close");
ajaxRequest.send(infoToSend);
}










privacy (GDPR)