Dynamically load mysql data using jquery and php

In this guide, I’ll be showing how you can dynamically retrieve data from mysql database using Jquery and Php. When I say dynamically, it means that there is no need to reload the page every time you try to access data from the database. This would be nice, since it will take lesser time for the user to actually see the results of his query.

Requirements:

• Basic knowledge on Jquery
• Basic knowledge on Php

I assume that you already know how to retrieve data from mysql database using Php. And basic knowledge of using Jquery.

First thing that you need to do is to import Jquery library:

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

Then create an input box. Where the user will input his query:

<input type="text" id="inp" name="inp"/></span>

Then create a div which we will use later to display the results:

<div class="results"></div>

Declare another script on the head portion of your project:

<script type="text/javascript">

</script>

Inside the new script that you’ve just created. Declare a function that would listen to the keyup event.

$(function(){

    $(#inp).keyup(function(){

    });

});

Here’s what happens. The function that you have declared will monitor any changes to the input box which has the id ‘inp’. And every time you hit any key on the keyboard. The action which is to be performed inside that event will be executed.

Inside the keyup function. Declare a variable that would store the value which is inputted in the input box.

var inpvalue= $('#inp').val();

Next thing that you need to do, is to declare another jquery function. This is the most important part of this tutorial, since this will be the one who will actually fetch the value from the database.

$.ajax({
    type: 'POST',  
    data: ({p : inpval}),
    url: 'listercust.php',
    success: function(data) {
         $('.results').html(data); 
 });

Here’s the code explanation:

• type:the form method. This will either be POST or GET. POST is more secure than GET. Since users will be able to modify the data directly from the url if you use GET. And if you use POST, data will be hidden and you won’t be able to modify or tamper it.
• data:this is the data that will be passed to the sql query in the php file that you will specify in the url.
• url: this is the actual php file which has the query in it. Be sure to define everything that you need to actually query the database in this file.
• success: this is where you define the callback function. A callback function is the function that will be called after the ajax function executed perfectly. This is where you will display the actual result that has been generated by the php file.

Then all you have to do now is to display the result of the query by changing the html property of the div with the class result. And the parameter would be the data fetched from the ajax function:

$('.result').html(data);

Overall this is what the code will look like:

$(function(){
            $('#inp').keyup(function(){

            var inpval=$('#inp').val();

            $.ajax({
                type: 'POST',
                data: ({p : inpval}),
                url: 'listercust.php',
                success: function(data) {
                     $('.result').html(data);

          }
        });
    });
});

The php file

The  second part of this tutorial would be the the php file that has the query on it.

First thing that you need to do is to declare all the connections needed to connect to the database. I won’t be discussing it here since its  one of the basics.

Declare a php variable that would receive the value from the ajax function that you have created earlier. Remember that the parameter ‘p’   should match the value that you declared on the ajax function.

$name=$_POST['p'];

This part of the function:

data: ({p : inpval}),

All you have to do now is to make a query that would use the data inputted by the user:

$query=mysql_query(“SELECT * FROM table

WHERE fieldx like ‘$name%'”);

Then display the fetch values:

while($row=mysql_fetch_assoc($query)){
    $row['name'];

}

Conclusion

That is how you fetch data dynamically from mysql database using jquery.