Share on Google+Share on Google+

jQuery to Show Data Randomly

In this first jQuery tutorial we will develop a simple program that Show Data Randomly from server and displays on the user browser.

jQuery to Show Data Randomly


In this first jQuery tutorial we will develop a simple program that Show Data Randomly  from server and displays on the user browser. In this example we will be calling a server side PHP script to get the Random Data. You can easily replace PHP with JSP, or ASP program.

Steps to develop the Data Show Randomly

Step 1:





Create php file to that prints the current server data. Here is the code of PHP script (time.php).

header("Cache-Control: no-cache");

$prefix = array('P1','P2','P3','P4');
$suffix = array('S1','S2','S3','S4');
// This selects a random element of each array
echo $prefix[rand(0,count($prefix)-1)] . " Related To  " 
. $suffix[rand(0,count($suffix)-1)];


Step 2:

Write HTML page to call the script.php. Create a new file (randomArray.html) and add the following code into it:

		<title>AJAX with jQuery Example</title>
		<script type="text/javascript" src="jquery.js"></script>
		<style type="text/css">
		#wrapper {
			width: 240px;
			height: 80px;
			margin: auto;
			padding: 10px;
			margin-top: 10px;
			border: 1px solid black;
			text-align: center;
		<div id="wrapper">
		<script type="text/javascript">
				$("#quote p").load("script.php");
		<input type="submit" id="random" value="OutPut!"><br />
		<div id="quote"><p></p></div>

Program explanation:

The following code includes the jQuery JavaScript library file:

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

The code


When we click on the Ouput Button.

makes load the  to script.php file.

Following code intercepts the ajax call success and then sets the data into "quote" div:

s$("#quote p").load("script.php")(



When you run the program in browser it will look like following screen shot:


Check online demo of the application

Learn from experts! Attend jQuery Training classes.



Posted on: September 8, 2008 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Discuss: jQuery to Show Data Randomly  

Post your Comment

Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image