Retrieving Data Using AJAX + jQuery

In this article, I will demonstrate to you a simple code to retrieve post and receive data using AJAX in jQuery.

What does this sample do?

We would send a sample text via $_POST to our remote response file. Our remote url file would then generate a table with a random number of rows and use the sample text that we sent as filler text. We will not be using any <form> element for this sample.

Here is the live demo of Retrieving Data Using AJAX + jQuery.

HTML head

In the <head> area, let’s include our jQuery framework.

{code type=”php”}<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>{/code}


Next, we add little styling for our table.

{code type=”php”}div#content{
border:solid 1px #000000;
div#content table{
div#content table thead{
div#content table tbody tr{
border-bottom: solid 1px #DFDFDF;
.td-col1{ width: 50px;}
.td-col2{ width: 150px;}
.td-col3{ width: 150px;}
.td-col4{ width: 150px;}{/code}

HTML body

Our body contains an input field where we would enter the sample text that we want, a button that would trigger the click event and send the value to our remote file and a <div> where the response text will be placed.

{code type=”php”}<p>
Enter sample data here
<input id=”data” type=”text” value=”Lorem Ipsum” />
<input type=”button” href=”#get-content” id=”clickme”
value=”Get Remote Table Data” />
<div id=”content”>
The table will be placed here

jQuery Script

Using the click event as a trigger, we will be able to send a $_POST value to our remote file.

Get the value of our textfield with “data” as an id

{code type=”php”}$(“#data”).val(){/code}

Set the $_POST[‘data’] with the input text value

{code type=”php”}data: “data=” + $(“#data”).val(){/code}

{code type=”php”}
success: function(msg){

After a successfully request, the response text will be received using “msg” which we will display in our

{code type=”php”}
<div id=”content”>
The table will be placed here

Here is the complete script code

{code type=”php”}
<script type=”text/javascript”>
$(“#clickme”).click(function () {
type: “POST”,
data: “data=” + $(“#data”).val(),
url: “demo/jquery-ajax-post-response.php”,
success: function(msg){


Here is content of our remote file

{code type=”php”}
$sampleData = ‘la la la’;
if (isset($_POST[‘data’]) and trim($_POST[‘data’]) != ” ) {
$sampleData = trim($_POST[‘data’]);
$rowCount = rand(1, 10);
Total data rows : <?php echo $rowCount; ?><br />
Sample data : <?php echo $sampleData; ?><br />
Request time :
<?php echo date(‘F d, Y h:i:s a’, $_SERVER[‘REQUEST_TIME’]); ?>
<td class=”td-col1″>#</td>
<td class=”td-col2″>Column 1</td>
<td class=”td-col3″>Column 2</td>
<td class=”td-col4″>Column 3</td>
<?php for($rowCtr = 1; $rowCtr <= $rowCount; $rowCtr++): ?>
<td><?php echo $rowCtr; ?></td>
<td><?php echo $sampleData; ?></td>
<td><?php echo $sampleData; ?></td>
<td><?php echo $sampleData; ?></td>
<?php endfor; ?>

Recommended Posts
  • Shuman Baral

    Thank you.It really solved my confusion to correct my code

  • Dr Araenalion


  • Dr Arenalion

    thank u very much

  • Thanks a lot!!
    i need this for complete my we site!!
    thanks again ^^

  • wynajem busow

    This website online is known as a stroll-by for the entire data you wished about this and didn’t know who to ask. Glimpse here, and you’ll positively discover it.

  • Dominique

    Anyone have a sample of this using

  • Pingback: Bouw een Iphone App in HTML, CSS & JQuery()

  • nice tuts..tenxs!

  • tperri

    Anyone have a sample of this using

  • thanks ken! actually, i already have a JSON tutorial in my personal blog.


  • ken-master

    Thanks Joy. nice tuts. i wish you can use JSON next time. good work.

  • Jhoy Imperial

    thanks lys! me too, had a very hard time before 😀

  • Wow nice! I have a very hard time debugging AJAX via POST since I can’t test it directly on the URL.

    I used GET most of the time.

    You’ve got a very organized demo page, wow! Maybe I could create mine also. Hmmm…. 😀