Fetch Data From Database Using Ajax Technology with PHP 7.2 


In this article I will show you how to fetch data from the database using PHP 7.2. In this tutorial, we will take a look at how to fetch data using ajax Technology without refreshing your page. Ajax will help us to dynamically get data from the server without refreshing the page. In the previous article, we saw that how to insert data in MySQL database using ajax Technology. In this tutorial, we will move ahead and look how to fetch the data which we are inserted in the previous article

fetch data

so let’s get started.

index.html

Start your Apache server and also start MySQL server. After that open integrated development environment ( IDE )  and create the empty folder with name ajax Technology. You can choose your own name for this folder. in this folder create the HTML file. Import the following code in your HTML file.

In the above code, we just link Bootstrap to style the document. After that, we had some text boxes that take the input from the user. If you read the previous article that you will know about how to insert the data into the database using these text boxes. In this tutorial, this text boxes is not really important but for the design, we just use that.

We are using the form tag to send the data to the request.php file. We are using this file to send the response to the main.js  file. We use the main.js file to send the ajax request. We use request.php to get the response from the server.

Connect.php

Create the Connect.php file. In this file, we create a class that creates a connection between PHP and MySQL server.  we are using an object-oriented approach to handle all the task. We create the constructor that defines the connection property and connect PHP server to the MySQL database.

In this file, we just created a class connect and specify some properties. We are using the constructor to specify a connection. So when you create an instance of the class connection property will automatically initialize. In the properties, we use the username password database name server name. If you have a different value of these properties then you can change this also.

After that, we created get data function that gets the data from the MySQL database table and returns it to the PHP. In this function, we execute SQL Query which returns all the database table record. Then we will store all the record in the send array variable and return this array to the function. So when you execute this function you will get an array of database records.

Magic.js

After that create the magic.js file. In this file, we will call the ajax utility function. Using this function we execute the get data function in the class connect. Now, this get data function will return table records so we will get that records and display it in the bootstrap table. Let me show you the code first.

In the above code, we created a simple function that executes the Ajax utility function. So we first remove all the default rows from the bootstrap table so we use remove method of jQuery to remove an element from the document. We first select table rows and remove the default rows first. Using the post method specify ajax function and in the URL we specify the request.php file. Using this file you send the response to the user. we will take a look at this file letter.

You also send a true Boolean value with the URL. After that will get the response from the server with JSON format so we had specified Data type JSON. In the done() method we will get the response so here we will call each function in jQuery to iterate through the database records.

Using key and value pair we display database records in the bootstrap table. To iterate through the database records we used each function in jQuery.

request.php

Create request.php file. In this file, we will send the response to the user. Using the echo statement which sends a response to the ajax utility function. Import the following code in the request.php file.

So this will send the response to ajax utility function with JSON format. So in ajax utility function we just get this JSON formatted data and display it in the bootstrap table using each function of jQuery. To insert the element in the DOM, we use the append method of jQuery. this method will insert the element in the document object model.

Now just run your document. But before you execute this document keep in mind you have at least one record in your database table. If you don’t have any record in your table then you will not able to see anything in the bootstrap table. So first insert some records in your MySQL database table and then execute this application.

That’s it now you will able to get data from the server using ajax Technology. The benefit of Ajax Technology is you can retrieve or insert or you can do anything concerned with a server side language dynamically. It will not update your whole page again this will save your time and data also.

your fetch data from database with ajax technology is ready. if you wanted to create a complete application that inserts data and display this data just after you press the insert button then just combine the previous article and this article together This will help you to create a whole application that inserts and Fetch data and display it in the bootstrap table.

To read the previous article click here. that is all for this article. We will see you in the next article.

Leave a Reply

Your email address will not be published. Required fields are marked *