How to make Ajax request using jQuery

The main reason to use Ajax is to get data from database without reloading the page. It can be used for banner rotation, user notifications and lots more.

First create two simple links, one of them will load random number, the other one will load letters to the data div with ajax. 


<a href="#" onClick="ajax_loader('number');">Load random number</a><br/>
<a href="#" onClick="ajax_loader('letter');">Load random letters</a><br/>

<div id="data"></div>


I load jquery-1.7.2.min.js into my HTML.

<script src="js/jquery-1.7.2.min.js"></script>

This is the ajax GET request which loads data from ajax_data.php to data div.

<script type="text/javascript">
function ajax_loader(x) {
	req = $.ajax({
		type: "GET",
		url: "ajax_data.php?q=" + x,
		datatype: "html",
		success: function(data){


Let`s create the PHP file what contains the data, name it to ajax_data.php. If number link was pressed this will generate a random number, if letter link was pressed grenerates random letters. If you want to do some MySQL query with your PHP, feel free to write your own code for it.

if( $_GET['q'] == "number" ){
	echo rand();
if( $_GET['q'] == "letter" ){
	$letters = array_merge(range('a','z'));
	$rnd = array_rand($letters, 8);
	$random_hash = "";
	for($i=0;$i<=7;$i++) { $random_hash .= $letters
	$random_hash = str_shuffle($random_hash);
	echo $random_hash;

Demo »


Related articles

Pie Chart with Flot jQuery Plugin

Pie Chart with Flot jQuery Plugin


Learn how to use the pie plugin for Flot charts.

Draw Graph with Flot jQuery Chart

Draw Graph with Flot jQuery Chart


Flot is a brilliant jQuery Graph drawning plugin developed by Ole Laursen and David Schnur.

jQuery Tagging Plugin

jQuery Tagging Plugin


This plugin transforms an HTML unordered list into a unique tags list and also uses jQuery UI auto-complete to supply suggestions to users as they type.

1 comment

John Smith2015-10-27 02:08

Can i have the code

Leave a comment

We welcome any comment from you! Please keep in mind that comments are moderated and rel='nofollow' is in use. So, please do not use a domain as your name or a spammy keyword, or your comment will be deleted.

Name: *

E-mail: *

Message: *

Click on the car *

Find us on Facebook



Back to Top