Esküvő

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. 

HTML

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

jQuery

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){
			$('#data').html(data);
		}
	});
}
</script>

PHP

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.

<?php
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 »


Esküvő


Related articles

Pie Chart with Flot jQuery Plugin

Pie Chart with Flot jQuery Plugin

28/02/2013

Learn how to use the pie plugin for Flot charts.

Draw Graph with Flot jQuery Chart

Draw Graph with Flot jQuery Chart

26/02/2013

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

jQuery Tagging Plugin

jQuery Tagging Plugin

24/02/2013

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

Tags

Esküvő

Back to Top