Show data from database on page load using Ajax, Php and jQuery

In this tutorial I am going to discuss how to show data from database on page load. With the help of AJAX we are going to achieve this. I know AJAX is one of the very hot topic for PHP beginners. Because it is using almost in every site. I will use jQuery and its ajax function to trigger ajax.

Also Read:

What I am going to do?

I will create a page that shows customer information in a table. I will achieve this with the help of following steps.

  • I will trigger ajax on page load (index.php). I will also show a loading bar unless I get the data.
  • Ajax request will receive by ajax_get_data.php. ajax_get_data.php fetch records from mysql database using MYSQLi OOP.
  • Then I will create a html table and insert customers record in table column and print table.
  • Ajax response(table html) will receive on index.php page. Then i will show that response on index.php page.

Show data from database Ajax, Php and jQuery

Show data from database on page load using ajax, php and jquery

Create Database:

Create Mysql Table:

Insert Records In Mysql Table:

Create HTML:

There is a div with a id customer-data. I will show customer data in customer-data div. ajax-loader.gif is a loader image.

showing ajax loader

CSS:

jQuery Ajax Code:

Ajax Code:

 

Posted in PHP

Author: Ahsan Zameer

I am a web developer and love to search new stuff on web. Trying different approaches and ideas to make web developing more interesting and enjoyable.