jQuery AJAX Update Data from Database Without Page Reload

Updating data is one of the most important operations in any web application. Whether it is editing a user profile, updating blog posts, or managing records in an admin dashboard, users expect changes to happen quickly and smoothly.

With jQuery AJAX and PHP, you can update existing records in a MySQL database without refreshing the page. This creates a faster and better user experience compared to traditional form submission.

In this step-by-step tutorial, you’ll learn how to load existing data into an edit form, submit updated values using AJAX, and save changes in the database using PHP prepared statements.

This method is widely used in:

• Edit profile pages
• Blog post editing
• Admin dashboards
• Product management systems

👉 By the end of this tutorial, you’ll be able to build a complete AJAX update system for your own projects.

What You’ll Learn

• Load data into edit form
• Update records using AJAX
• Use PHP prepared statements
• Refresh data dynamically

What is AJAX Update?

AJAX update means modifying existing data in the database without refreshing the page.

👉 In simple terms:

Click Edit → Load data → Change values → Save instantly

This improves user experience and is widely used in admin panels, dashboards, and profile pages.

AJAX Update vs Traditional Update

Traditional Update

• Page reloads after submit
• Slower interaction

AJAX Update

• No page reload
• Instant UI update
• Better user experience

👉 This is why modern applications prefer AJAX updates.

Step 1: Database Table

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

Step 2: Display Data with Edit Button

fetch.php

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

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

while ($row = $result->fetch_assoc()) {
    echo "<tr>
            <td>{$row['id']}</td>
            <td>{$row['name']}</td>
            <td>{$row['email']}</td>
            <td>
                <button class='editBtn'
                    data-id='{$row['id']}'
                    data-name='{$row['name']}'
                    data-email='{$row['email']}'>
                    Edit
                </button>
            </td>
          </tr>";
}
?>

Step 3: HTML Edit Form

<form id="editForm">
    <input type="hidden" name="id" id="userId">
    <input type="text" name="name" id="userName" required>
    <input type="email" name="email" id="userEmail" required>
    <button type="submit">Update</button>
</form>

<div id="message"></div>

Step 4: Load Data into Form (jQuery)

$(document).on('click', '.editBtn', function() {
    $('#userId').val($(this).data('id'));
    $('#userName').val($(this).data('name'));
    $('#userEmail').val($(this).data('email'));
});

Step 5: jQuery AJAX Update Code

$('#editForm').submit(function(e) {
    e.preventDefault();

    $.ajax({
        url: 'update.php',
        type: 'POST',
        data: $(this).serialize(),
        success: function(response) {
            $('#message').html(response);
            loadUsers(); // Reload table
        }
    });
});

Step 6: PHP – Update Data

update.php

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

$id    = $_POST['id'];
$name  = $_POST['name'];
$email = $_POST['email'];

$stmt = $conn->prepare(
    "UPDATE users SET name = ?, email = ? WHERE id = ?"
);
$stmt->bind_param("ssi", $name, $email, $id);

if ($stmt->execute()) {
    echo "Data updated successfully!";
} else {
    echo "Update failed";
}
?>

Step 7: Reload Data Function

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

Handling Errors in AJAX Update

Always handle errors properly:

error: function() {
    alert('Something went wrong!');
}

This helps debugging and improves reliability.

FAQs

Best Practices

• Validate inputs (frontend + backend)
• Use prepared statements
• Disable submit button while updating
• Show success/error messages clearly

Common Errors

• Not setting hidden ID field
• Forgetting e.preventDefault()
• Wrong selector for form fields
• Not refreshing data after update

Mini Task for Students

1. Add modal popup for edit form
2. Add loading spinner
3. Validate email format
4. Highlight updated row

Conclusion

Updating data using jQuery AJAX with PHP helps create faster, smoother, and more professional web applications.

Instead of refreshing the entire page after every update, AJAX allows you to modify records instantly and refresh only the necessary part of the interface. This improves both user experience and application performance.

By combining jQuery AJAX, PHP, and MySQL prepared statements, you can build secure and efficient update functionality for admin panels, profile pages, and CRUD-based systems.

Now that you have completed Create, Read, Update, and Delete operations, you have a full understanding of AJAX CRUD development.

👉 The next step is to apply these concepts in real-world projects like live search systems, login forms, and complete management dashboards.

🚀 Next Post

After learning complete jQuery and AJAX tutorial, the next step is:

👉 Projects Based on jQuery AJAX

This includes:

• Live Search System
• Login System
• Product CRUD Project
• Student Management System
• Real-time Comment System

These projects help you apply CRUD concepts in real-world applications.