AJAX Noob

Forsaken · 03-24-2007, 08:13 PM

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

Code:

<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

PHP Code:


			
<?

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?

jmitch18 · 03-24-2007, 08:22 PM

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

Code:

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.

Forsaken · 03-24-2007, 08:23 PM

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

carlitos_way · 03-26-2007, 09:11 AM

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

Code:

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

and in the request you add these lines

Code:

...
	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...

alexharvey_eu · 02-19-2008, 09:38 PM

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...

Code:

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); 
}