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.
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
CSS
Next, we add little styling for our table.
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;}
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.
<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>
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
$("#data").val()
Set the $_POST['data'] with the input text value
data: "data=" + $("#data").val()
success: function(msg){
$("#content").html(msg)
}
After a successfully request, the response text will be received using “msg” which we will display in our
<div id="content"> The table will be placed here </div>
Here is the complete script code
<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>
PHP
Here is content of our remote file
<?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>
Comments (5)