jQuery AJAX Fetch Data from Database Without Page Reload

Introduction

Fetching data from a database without reloading the page is one of the most common real-world uses of AJAX. With jQuery AJAX + PHP, you can load records dynamically and show them instantly on your page.

In this tutorial, you’ll learn how to fetch data from a database using jQuery AJAX, process it with PHP, and display it on the front-end. This is useful for dashboards, lists, search results, and WordPress plugins.

This technique is used in:

• Admin panels
• Blog listings
• User dashboards
• Live data tables

What You’ll Learn

• Fetch records using AJAX
• Display data dynamically
• Use PHP + MySQL with AJAX
• Refresh data without page reload

What is AJAX Data Fetching?

AJAX data fetching means loading data from the server without refreshing the page.

👉 In simple terms:
You request data from the server and display it instantly on the webpage.

Example use cases:

• Loading user lists
• Displaying blog posts
• Updating dashboards

👉 This makes web applications faster and more interactive.

AJAX vs Normal Page Load

Normal Page Load

• Entire page reloads
• Slower user experience

AJAX Request

• Only data updates
• Faster and smoother

👉 This is why modern applications prefer AJAX.

How It Works

Here’s a simple flow:

1. User clicks “Load Data” button
2. jQuery sends an AJAX request to PHP
3. PHP fetches records from database
4. Server returns HTML data
5. jQuery inserts data into the table

👉 This allows dynamic data loading without refreshing the page.

When to Use AJAX Data Fetching

Use this when:

• You want dynamic content updates
• You are building dashboards
• You need fast data loading

Avoid when:

• Data rarely changes
• SEO content must be visible without JavaScript

Enhancing the UI

You can improve user experience by:

• Showing a loading indicator before data loads
• Styling tables using CSS or frameworks
• Adding pagination for large data
• Highlighting new or updated rows

Example:

$(‘#userData’).html(‘Loading…’);

Step 1: Database Table (Same as Previous Post)

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100),
    email VARCHAR(100)
);

Step 2: HTML Structure

<button id="loadData">Load Users</button>

<table border="1" width="100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody id="userData">
        <!-- Data will load here -->
    </tbody>
</table>

Step 3: jQuery AJAX Code

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$('#loadData').click(function() {
    $.ajax({
        url: 'fetch.php',
        type: 'GET',
        success: function(data) {
            $('#userData').html(data);
        }
    });
});
</script>

Step 4: PHP – Fetch Data

fetch.php

<?php
$conn = new mysqli("localhost", "root", "", "ajax_demo");

$result = $conn->query("SELECT * FROM users");

if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        echo "<tr>
                <td>{$row['id']}</td>
                <td>{$row['name']}</td>
                <td>{$row['email']}</td>
              </tr>";
    }
} else {
    echo "<tr><td colspan='3'>No data found</td></tr>";
}
?>

Step 5: Auto Load Data on Page Load (Optional)

$(document).ready(function() {
    loadUsers();

    function loadUsers() {
        $.ajax({
            url: 'fetch.php',
            success: function(data) {
                $('#userData').html(data);
            }
        });
    }
});

Enhancing the UI

You can:

• Add loading text
• Style table with CSS
• Add refresh button
• Animate table rows

Example loading message:

$('#userData').html('Loading...');

Performance Tips

• Avoid loading too much data at once
• Use LIMIT in SQL queries
• Implement pagination for large datasets
• Cache results if needed

👉 This improves speed and performance.

Real Example: Dashboard Table

This technique is commonly used in:

• Admin dashboards
• User management systems
• Blog post listings
• Data tables with filters

👉 Almost every modern web app uses this concept.

Best Practices

• Always sanitize output
• Use prepared statements
• Limit data for large tables
• Paginate results if needed

Common Mistakes

• Wrong database credentials
• Missing jQuery CDN
• Incorrect AJAX URL
• Not handling empty results
• Forgetting to echo output in PHP

👉 Always check browser console for errors.

FAQs

Practical Tasks

1. Add a delete button for each row
2. Fetch data automatically every 5 seconds
3. Show loading message before data loads
4. Display total number of users
5. Highlight newly added records

Conclusion

Fetching data using jQuery AJAX with PHP allows you to build fast and interactive web applications.

You can load records dynamically, update UI instantly, and improve user experience without page reloads.

Once you understand this concept, you can build advanced features like live search, filters, and dashboards.

🚀 What to Learn Next?

After this, continue with:

• jQuery AJAX Form Submit
• jQuery Events
• jQuery DOM Manipulation

👉 These topics will help you build complete applications.