Retrieve data using JQuery AJAX and PHP

Retrieve data using JQuery AJAX and PHP

Saving data without navigation is a common task. Several web developers use this technique daily and it is especially essential when querying the remote data source from a non-server side file, for example HTML or JavaScript.

If you want a brief of the former topic we were speaking, you could dive into this tutorial – AJAX database update with PHP and JQuery.

AJAX is also helpful when you retrieve data using jquery from a remote data source. Just the opposite of what we were speaking until now. You want to get the data that is already stored in your database.

Is that what you are looking for? Well, read on then and you would have the brightest idea about this topic.

Retrieve data using JQuery – remote PHP source

JavaScript or JQuery can be used effectively to retrieve data using JQuery from a database. The server side scripting language would be PHP in our case.

PHP queries the data and sends it asynchronously to the HTML page. So, you need not send data through any form, nor through a URL. Your program control stays in the HTML page and just retrieves the data from the external PHP file.

I have written a very descriptive post on this concept of retrieving data from the database using JSON AJAX PHP and JQuery. For advanced learning, you can refer to that too. It has a fantastic interactive demo with option to add your own string to the database and see if the logic works!

For this procedure we need to make an AJAX GET or POST method call.

Ideally, both these methods return a value when called. So, when you call the method you get a value in return which can be used accordingly in the callback function. The default data type of the returned value is HTML. So, we normally bind the database values into HTML elements and return.

So, for example, if you want to display a name from the data upon user interaction; you just bind the database value along with an HTML tag (suppose “span”) and echo it from the PHP file. Our first step to retrieve data using JQuery is complete.

Automatically, the callback function here in the HTML file gathers the value as a parameter. So, when the user types a username for new registration; send the value via POST method to the PHP file for checking. Check with the existing database username values. Now, echo your results accordingly back to the HTML file.

In the HTML file, within the callback function, append the parameter data to an existing HTML element for display to the user. That’s it! Your attempt to retrieve data using JQuery is now successful.

Here’s the example code of the above mentioned username validation during registration (also checkout the demo for this) –

<div class="box">
<ul>
<ul>
	<li><label>Try a custom username</label> <input id="username" autocomplete="off" type="text" /></li>
</ul>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("input").keyup(function(){
var thiss = $(this);
var value = thiss.val(); 
$.get("check.php",{value:value},function(data){
thiss.parent('li').siblings('li').html(data);
});
});
});
</script>

and the remote PHP datasource

if(isset ($_GET['value']) &amp;&amp; $_GET['value']!='')
{
$value=$_GET['value'];

$query="SELECT username FROM users WHERE username = '$value'";
$results = mysql_query($query)
or die(mysql_error());

if(mysql_num_rows($results)&gt;0)
{
echo '<label class="negative">Username exists</label>';
}
else
{
echo '<label class="positive">Username available</label>';
}
}

Retrieve data using JQuery – returning JSON dataset

Often your web application might feel the need of extra data from the data source. You can retrieve data using JQuery in a different way in this case. For a very basic example, let us consider that your website displays a set of subjects and marks for a particular user entry. So, when I provide a student’s name in your website’s text box, I get a table containing the student’s subject names and marks.

The idea here is that the subjects and the marks are dynamic data. So, it may be different for different students. So, the values from the database determine what value is displayed.

To know more about dynamic data – read Difference between static dynamic content.

So, when a text input value is served by the user, the table is generated automatically. This time the PHP file does not query data and bind it within an echo statement.

First, to retrieve data using JQuery, we fetch data as an array set from the database. After fetching the array we use PHP library function for encoding data to JSON format. Then we echo it.

Back here in the HTML file, when calling the POST method, we declare the ‘dataType’ parameter as JSON explicitly.

So, the parameter in the callback function now contains JSON value. Again we decode the JSON to a simple array and display accordingly using JavaScript or JQuery.

That is all. You can now make your custom applications and try retrieving data with AJAX.