AdSense


How to display data to MySql from PHP using jQuery AJAX.


Hello friends, in the last post we entered our values  without refreshing our page. In this post we will learn how to retrieve data  from a database in PHP using AJAX jQuery method. We will fetch data from the database without refreshing the webpage. So let's get started, but before you read the last post, you can read it here.


Here we using three file for View/display data in MySql database using Ajax.
  1. database.php
  2. index.php
  3. view.php

Creating Database Table

  • First create your database name in phpmyadmin Using XAMPP webserver. create a database called testing. Inside testing database, create a table called users. The users table will take following fields.

 --  
 -- Table structure for table `users`  
 --  
 CREATE TABLE `users` (  
  `id` int(50) NOT NULL,  
  `name` varchar(50) NOT NULL,  
  `email` varchar(50) NOT NULL,  
  `password` varchar(50) NOT NULL  
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;  

  • You also need to insert some values in your table

Creating HTML Page

  • Now we will create a simple index page to show users table records after inserting in users table by fetching value from database.
  • You can use the following HTML code to create your page. Copy and save it as index.php in your project folder.
index.php

 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
  <title>How to display data to MySql from PHP using jQuery AJAX</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>  
 </head>  
 <body>  
      <div class="container">  
       <h2 style="text-align: center;">How to display data to MySql from PHP using jQuery AJAX</h2>  
            <div id="tableData">  
            </div>  
      </div>  
 </body>  
 </html>  

  • To write the jQuery Script we should open <script> tag. You can put it in after </head> element.
 <script type="text/javascript"></script>  

Creating jQuery AJAX Script.

 // fetch data from student table..  
      function loadTableData(){  
            $.ajax({  
              url : "display.php",  
              type : "POST",  
              success:function(data){  
                  $("#tableData").html(data);  
               }  
   	   });  
       }  
      loadTableData();  

Index.php file work is finish now working on view.php file first of all create database connectivity for retrieve data from the database.

database.php

 <?php  
      // create database connectivity  
      $servername = "localhost";  
      $username = "root";  
      $password = "";  
      $database = "testing";  
      // Create connection  
      $con = new mysqli($servername, $username, $password, $database);  
      // Check connection  
      if ($con->connect_error) {  
            die("Connection failed: " . $con->connect_error);  
      }  
 ?>  

Server name is your web server name if your are using XAMPP than your server name is localhost 
username is root, password is blank because in my case I have no password and database name is testing.
If connection is successfully than retrieve data from the database table called users

Include your database.php connection file in view.php page.

View.php

 <?php  
      // create database connectivity  
      require_once('database.php');  
      // fetch data from student table..  
      $sql = "SELECT * FROM users";  
      $query = $con->query($sql);  
      if ($query->num_rows > 0) {  
           $output = "";  
           $output .= "<table class='table table-hover table-striped'>  
                     <thead>  
                          <tr>  
                               <th>Id</th>  
                               <th>Name</th>  
                               <th>Email</th>  
                               <th>Edit</th>  
                               <th>Delete</th>  
                          </tr>  
                     </thead>";  
           while ($row = $query->fetch_assoc()) {  
           $output .= "<tbody>  
                          <tr>  
                               <td>{$row['id']}</td>  
                               <td>{$row['name']}</td>  
                               <td>{$row['email']}</td>  
                               <td><button class='btn btn-success btn-sm edit-btn' data-id='{$row['id']}' data-toggle='modal' data-target='#exampleModal'>Edit</button></td>  
                               <td><button class='btn btn-danger btn-sm delete-btn' data-id='{$row['id']}'>Delete</button></td>  
                          </tr>  
                </tbody>";  
           }  
      $output .="</table>";  
      echo $output;  
      }else{  
           echo "<h5>No record found</h5>";  
      }  
 ?>  

This post is about how to use AJAX to retrieve data from a database in PHP. If you have any confusion in my code or a problem with the steps, don't hesitate to ask in your comments. thank you

You can always support by sharing on social media or recommending my blog to your friends and colleagues.    
If you have any suggestions / problems about this tutorial, please comment on the  form below.😊

Post a Comment

Previous Post Next Post