Implement Ajax using PHP and Jquery

In this tutorial we will implement the AJAX technique using jquery and PHP.We can use the traditional method using the javascript XHR but it is lot simpler when we use Jquery.In the example detailed below the webpage posts the data to server and updates it asyncronously without page refresh.

How web pages post the form data to server:

Lifecycle of a POST Request without ajax

Usually the front end webpage is created using HTML in which the user can enter data using forms and submit it to the server.Meanwhile on the server side there exist a scripting component say for example PHP script that listen the request send from the html page and processes it .Once processing is complete the script send the data to client side which means webpage on the browser.The webpage will then needed to be reloaded to update the content received from the server.

What is Ajax:

Asynchronous Javascript and XML is the definition for AJAX.It includes the combination of technologies like javascript and HTML which can able to perform request and response to server asynchronously which means using AJAX you can send or retireve data as a background process.In this way we can communicate with server without refreshing the current page.

Lifecycle of Ajax request:

Using Ajax, the client webpage can communicate to the server and update the content of the webpage dynamically using the XHR – XmlHttpRequest. An XHR is an api available in the javascript that performs the AJAX requests.

Ajax using Jquery:

Jquery is the javascript library that provides faster and simple methods to perform client side scripting.Here in this example I have used the Jquery library to perform ajax operations.When an user submits the form the data is sent to the PHP script and the page is updated using the return data from the server.

File structure

In our html form the users keys in the username and email fields and presses submit button which posts the data to the server.

Form.html

Include the javascript library in the head section of the html page.

1 2	Ajax using PHP and Jquery <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

HTML form to get the user inputs

1
2
3
4
5
6
7
8
9

<form id="newform" action="process.php" method="post"><label class="description" for="element_1">Username </label>
<div><input id="uname" type="text" name="username" value="" maxlength="255" /></div>

<label class="description" for="element_1">Email </label>

<div><input id="email" type="text" name="email" value="" maxlength="255" /></div>

<input id="submit" type="submit" name="submit" value="Submit" />
</form>

Initialise the jquery

1
2
3
4

Call the jquery function When user presses submit button.

1
2
3

$("#newform").submit(function(){

});

jquery ajax request

1
2
3
4
5
6
7
8
9

$.ajax({
type: "POST",
url: "process.php", //similar to form action attribute
data: data1, // send the data in serialized format
success: function(msg){
// this function will be triggered after completion
// msg variable will have the return data from process.php

}

Server side PHP script

Here the php script-(Process.php) is very simple that it only prints the data it receives from _POST variable.

1
2
3
4

<?php
echo "Username :".$_POST["username"];
echo "Email :".$_POST["email"];
?>

Output

Complete code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

< !doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Ajax using PHP and Jquery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript">
$(document).ready( function() {

$("#newform").submit(function(){
$("#LoadingImage").show();
$('.message').html('');
var data1 = $('#newform').serialize();
$.ajax({
type: "POST",
url: "process.php",
data: data1,
success: function(msg){

$("#LoadingImage").hide();

$('.message').html(msg);

}
});
return false;
});
});
</script>

<form id="newform" action="process.php" method="post"><label class="description" for="element_1">Username </label>
<div><input id="uname" type="text" name="username" value="" maxlength="255" /></div>
<label class="description" for="element_1">Email </label>
<div><input id="email" type="text" name="email" value="" maxlength="255" /></div>
<input id="submit" type="submit" name="submit" value="Submit" />
<div class="message"></div>
<div id="LoadingImage" style="display: none;"><img src="loader.gif" alt="" /></div>
</form>
</body>
</html>