In this tutorial, I will be showing how you can use AJAX with jQuery.
From jQuery, you can send values to php page as GET or POST parameters.
You can use load() function OR ajax() function of jQuery to accomplish the AJAX functionality.
In the example below, I will show you how you can send parameters as GET method with the load() jQuery function.
In this example, there is a selection list of countries. Upon selecting any country, AJAX is used and respective cities are fetched.
Using GET method and load() function
HTML code of selection list
Countries:
<select name="country">
<option value="">Please Select</option>
<option value="1">Nepal</option>
<option value="2">India</option>
<option value="3">China</option>
<option value="4">USA</option>
<option value="5">UK</option>
</select>
<div id="cityAjax" style="display:none">
<select name="city">
<option value="">Please Select</option>
</select>
</div>
Using load() function to fetch cities with GET method
jQuery(document).ready(function(){
// when any option from country list is selected
jQuery("select[name='country']").change(function(){
// path of ajax-loader gif image
var ajaxLoader = "<img src='../ajax-loader.gif' alt='loading...' />";
// get the selected option value of country
var optionValue = jQuery("select[name='country']").val();
/**
* pass country value through GET method as query string
* the 'status' parameter is only a dummy parameter (just to show how multiple parameters can be passed)
* if we get response from data.php, then only the cityAjax div is displayed
* otherwise the cityAjax div remains hidden
*/
jQuery("#cityAjax")
.html(ajaxLoader)
.load('data.php', "country="+optionValue+"&status=1", function(response){
if(response) {
jQuery("#cityAjax").css('display', '');
} else {
jQuery("#cityAjax").css('display', 'none');
}
});
});
});
PHP code to populate cities selection list
<?php
$country = $_GET['country'];
if(!$country) {
return false;
}
$cities = array(
1 => array('Kathmandu','Bhaktapur','Patan','Pokhara','Lumbini'),
2 => array('Delhi','Mumbai','Kolkata','Bangalore','Hyderabad','Pune','Chennai','Jaipur','Goa'),
3 => array('Beijing','Chengdu','Lhasa','Macau','Shanghai'),
4 => array('Los Angeles','New York','Dallas','Boston','Seattle','Washington','Las Vegas'),
5 => array('Birmingham','Bradford','Cambridge','Derby','Lincoln','Liverpool','Manchester')
);
$currentCities = $cities[$country];
?>
City:
<select name="city">
<option value="">Please Select</option>
<?php
foreach($currentCities as $city) {
?>
<option value="<?php echo $city; ?>"><?php echo $city; ?></option>
<?php
}
?>
</select>
Similarly, you can use POST method and load() function.
Using load() function to fetch cities with POST method
jQuery(document).ready(function(){
// when any option from country list is selected
jQuery("select[name='country']").change(function(){
// path of ajax-loader gif image
var ajaxLoader = "<img src='../ajax-loader.gif' alt='loading...' />";
// get the selected option value of country
var optionValue = jQuery("select[name='country']").val();
/**
* pass country value through POST method
* the 'status' parameter is only a dummy parameter (just to show how multiple parameters can be passed)
* if we get response from data.php, then only the cityAjax div is displayed
* otherwise the cityAjax div remains hidden
*/
jQuery("#cityAjax")
.html(ajaxLoader)
.load('data.php', {country: optionValue, status: 1}, function(response){
if(response) {
jQuery("#cityAjax").css('display', '');
} else {
jQuery("#cityAjax").css('display', 'none');
}
});
});
});
For AJAX use, jQuery also has another function called ajax().
Below is the code on how we can use it:-
Using ajax() function to fetch cities with GET method
jQuery(document).ready(function(){
// when any option from country list is selected
jQuery("select[name='country']").change(function(){
// get the selected option value of country
var optionValue = jQuery("select[name='country']").val();
/**
* pass country value through GET method as query string
* the 'status' parameter is only a dummy parameter (just to show how multiple parameters can be passed)
* if we get response from data.php, then only the cityAjax div is displayed
* otherwise the cityAjax div remains hidden
* 'beforeSend' is used to display loader image
* 'complete' is used to hide the loader image
*/
jQuery.ajax({
type: "GET",
url: "data.php",
data: "country="+optionValue+"&status=1",
beforeSend: function(){ jQuery("#ajaxLoader").show(); },
complete: function(){ jQuery("#ajaxLoader").hide(); },
success: function(response){
jQuery("#cityAjax").html(response);
jQuery("#cityAjax").show();
}
});
});
});
Using ajax() function to fetch cities with POST method
jQuery(document).ready(function(){
// when any option from country list is selected
jQuery("select[name='country']").change(function(){
// get the selected option value of country
var optionValue = jQuery("select[name='country']").val();
/**
* pass country value through POST method
* the 'status' parameter is only a dummy parameter (just to show how multiple parameters can be passed)
* if we get response from data.php, then only the cityAjax div is displayed
* otherwise the cityAjax div remains hidden
* 'beforeSend' is used to display loader image
* 'complete' is used to hide the loader image
*/
jQuery.ajax({
type: "POST",
url: "data.php",
data: ({country: optionValue, status: 1}),
beforeSend: function(){ jQuery("#ajaxLoader").show(); },
complete: function(){ jQuery("#ajaxLoader").hide(); },
success: function(response){
jQuery("#cityAjax").html(response);
jQuery("#cityAjax").show();
}
});
});
});
Hope this helps. Thanks.