In this article, we will learn how to fetch data from MySQL using jquery ajax and PHP, first, we need one database of MySQL then connect to it and simply fetch the data through PHP.


Create Database

create on database and import the following data in it.

-- phpMyAdmin SQL Dump
-- version 5.0.4
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Feb 07, 2021 at 12:05 AM
-- Server version: 10.4.17-MariaDB
-- PHP Version: 7.4.14

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `tutorial`
--

-- --------------------------------------------------------

--
-- Table structure for table `users`
--

CREATE TABLE `users` (
  `id` int(11) NOT NULL,
  `username` varchar(130) NOT NULL,
  `password` varchar(250) NOT NULL,
  `created_at` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Dumping data for table `users`
--

INSERT INTO `users` (`id`, `username`, `password`, `created_at`) VALUES
(1, 'stint', 'password', '2021-02-05 23:50:18'),
(2, 'rakesh', 'password', '2021-02-05 23:50:18');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `users`
--
ALTER TABLE `users`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `users`
--
ALTER TABLE `users`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;


Project file structure 

look at my project file structure where, I have created some files for php and Jquery

php-tutorial/
┣ ajax-script.js
┣ data.php
┗ index.php


index.php

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" crossorigin="anonymous">
        <title>Fetch Data From MySQL Database using AJAX in PHP</title>
    </head>
    <body>

    
        <div class="container">
            <h4>User data</h4>
            <table class="table">
                <tr>
                    <th>ID</th>
                    <th>Username</th>
                    <th>Created at</th>
                </tr>
                <tbody id="data">

                </tbody>
            </table>
        </div>

        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script type="text/javascript" src="ajax-script.js"></script>

    </body>
</html>


ajax-script.js


$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "data.php",
        dataType: "html",
        success: function (data) {
            $("#data").html(data);

        }
    });
});



data.php

<?php
// connect to db

$host = "localhost";
$user = "root";
$password = "";
$database = "tutorial";
$conn = mysqli_connect($host, $user, $password, $database);
$results = $conn->query("SELECT * FROM users");
?>

<?php while ($data = $results->fetch_assoc()): ?>

    <tr>
        <td><?php echo $data['id'] ?></td>
        <td><?php echo $data['username'] ?></td>
        <td><?php echo $data['created_at'] ?></td>
    </tr>
<?php endwhile; ?>


output:



Download source code

Are you facing problems in understanding this article? download source code now