PHP Learn It! Starting with PHP and AJAX
"Best Deal"

"Bored - Do You Agree?"
t-shirtgirlspics

Bored - Studied Hard - Enjoy Yourself "TAKE A BREAK"

"Decide Now-So Many Choices"
"Amazing Deals"
Once You Know, You Newegg

Starting with PHP and AJAX

This simple tutorial demonstrates how to post a form using PHP and AJAX without having to refresh the page. A first step in becoming an AJAX developer :)

Demo: See Demo
Source: Download Source

Overview

Learn How To Build Your Own AJAX Web Applications

Are you looking to build interactive AJAX applications? Learn how you can build enhanced and professional AJAX web applications and sites in minutes...

>> Click here to learn more <<

Programming AJAX applications isn't that difficult. I started learning AJAX by playing with the code. You can donwload the full source of this tutorial and play around with it to a get feel of the code.

This tutorial will demonstrate how to write form submission using PHP and AJAX.

I guarantee you that, at the end of this tutorial you will be confident to get started with AJAX in your applications.

Prototype AJAX Lib

This tutorial makes use of prototype AJAX library which can be downloaded here. It's a single JavaScript file which can be simply embed in the header section of your HTML code:

<head>
	<script type="text/javascript" src="prototype.js"></script>
</head>

PHP AJAX Form Submit

So in this demo, we have two files. The first file test.html contains a form with one input text box and a submit button. It also contains the javascript code for making the ajax request to test.php.

The 2nd file is the test.php which receives the ajax request when we click on the submit button.

When you fill in the test box and click the submit button, it displays the value of the text box without refreshing the page. See demo here. This is achieved using AJAX and it is really simple to accomplish.

First, I'll just copy the code for both files for you to see and explain the code line by line.

text.html

<html>
	<head>		
		<script type="text/javascript" src="prototype.js"></script>
		<script>

			function sendRequest() {
				new Ajax.Request("test.php", 
					{ 
					method: 'post', 
					postBody: 'name='+ $F('name'),
					onComplete: showResponse 
					});
				}

			function showResponse(req){
				$('show').innerHTML= req.responseText;
			}
		</script>
	</head>

	<body>
		<form id="test" onsubmit="return false;">
			<input type="text" name="name" id="name" >
			<input type="submit" value="submit" onClick="sendRequest()">
		</form>
		
		<div id="show"></div>
	</body>

</html>

test.php

<?php

if($_POST["name"] == "")
	echo "name is empty";
else
	echo "you typed ".$_POST["name"];
?>

Code Explained

Making AJAX Request

The function below sends the request out to our text.php script using the method post with the value filled in the input text box 'name' using $F(‘name') which retrieves the values we put in the text box. The onComplete: showResponse returns the repose from test.php

function sendRequest() {

	new Ajax.Request("test.php", 
		{ 
		method: 'post', 
		postBody: 'name='+ $F('name'),
		onComplete: showResponse 
		});
}

Displaying Response

Next we show the response we get from the text.php in the <div id=”show”></div>.

function showResponse(req){

	$('show').innerHTML= req.responseText;

}

So, when you click on submit you will either get a response saying 'name is empty' if the text box was left empty or "you typed <yourname>".

<?php
if($_POST["name"] == "")
    echo "name is empty";
else
    echo "you typed ".$_POST["name"];
?>

Summary

So there you have it. Your first tutorial in PHP and AJAX. I hope you enjoyed this tutorial.

Want to build sophisticated AJAX applications fast? Download "Build Your Own AJAX Web Applications"

Top