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}

CSS

Next, we add little styling for our table.

{code type=”php”}div#content{
border:solid 1px #000000;
margin:5px;
padding:5px;
width:600px;
}
div#content table{
font-family:sans-serif;
font-size:0.9em;
border-collapse:collapse;
}
div#content table thead{
font-weight:bold;
background-color:#DFDFDF;
}
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” />
</p>
<div id=”content”>
The table will be placed here
</div>{/code}

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){
$(“#content”).html(msg)
}
{/code}

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
</div>
{/code}

Here is the complete script code

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

PHP

Here is content of our remote file

{code type=”php”}
<?php
$sampleData = ‘la la la’;
if (isset($_POST[‘data’]) and trim($_POST[‘data’]) != ” ) {
$sampleData = trim($_POST[‘data’]);
}
$rowCount = rand(1, 10);
?>
<p>
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’]); ?>
</p>
<table>
<thead>
<tr>
<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>
</tr>
</thead>
<tbody>
<?php for($rowCtr = 1; $rowCtr <= $rowCount; $rowCtr++): ?>
<tr>
<td><?php echo $rowCtr; ?></td>
<td><?php echo $sampleData; ?></td>
<td><?php echo $sampleData; ?></td>
<td><?php echo $sampleData; ?></td>
</tr>
<?php endfor; ?>
</tbody>
</table>
{/code}

Recommended Posts
  • Shuman Baral

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

  • Dr Araenalion

    yyyyyyyaaaaaaaaaaaaa

  • 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 ASP.net?

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

  • nice tuts..tenxs!

  • tperri

    Anyone have a sample of this using ASP.net?

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

    http://jhoyimperial.wordpress.com/2008/07/28/parsing-json-data-from-php-using-jquery/

    HTH

  • 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…. 😀