PHP AJAX & MySQL

PHP AJAX & MySQL Tutorial

Combining PHP AJAX & MySQL allows you to dynamically fetch, insert, update, or delete database records without reloading the page. This is commonly used in live search, chat applications, dynamic tables, and dashboards.

1️⃣ How It Works

User triggers an event (e.g., clicking a button or typing in a search box).
AJAX (JavaScript) sends an asynchronous request to a PHP script.
PHP processes the request, interacts with MySQL database, and returns data (text, JSON, or HTML).
JavaScript receives the response and updates the web page dynamically.

2️⃣ Example: Fetch Data from MySQL using AJAX

Database Table users:

id	name	email
1	Vipul	vipul@example.com
2	Amit	amit@example.com
3	Ravi	ravi@example.com

PHP Script (fetch_users.php):

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

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT id, name, email FROM users";
$result = $conn->query($sql);

$users = [];
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $users[] = $row;
    }
}

header('Content-Type: application/json');
echo json_encode($users);

$conn->close();
?>

<?php

$conn = new mysqli("localhost", "root", "", "test_db");

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

}

$sql = "SELECT id, name, email FROM users";

$result = $conn->query($sql);

$users = [];

if ($result->num_rows > 0) {

while ($row = $result->fetch_assoc()) {

$users[] = $row;

}

header('Content-Type: application/json');

echo json_encode($users);

$conn->close();

HTML + JavaScript (index.html):

<!DOCTYPE html>
<html>
<head>
    <title>AJAX + PHP + MySQL Example</title>
    <script>
        function loadUsers() {
            fetch('fetch_users.php')
            .then(response => response.json())
            .then(data => {
                let html = "<ul>";
                data.forEach(user => {
                    html += `<li>ID: ${user.id} | Name: ${user.name} | Email: ${user.email}</li>`;
                });
                html += "</ul>";
                document.getElementById('result').innerHTML = html;
            })
            .catch(error => console.error(error));
        }
    </script>
</head>
<body>
    <h2>AJAX + PHP + MySQL Example</h2>
    <button onclick="loadUsers()">Load Users</button>
    <div id="result"></div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>AJAX + PHP + MySQL Example</title>

function loadUsers() {

fetch('fetch_users.php')

.then(response => response.json())

.then(data => {

let html = "<ul>";

data.forEach(user => {

html += `<li>ID: ${user.id} | Name: ${user.name} | Email: ${user.email}</li>`;

});

html += "</ul>";

document.getElementById('result').innerHTML = html;

})

.catch(error => console.error(error));

}

</script>

</head>

<body>

<h2>AJAX + PHP + MySQL Example</h2>

<button onclick="loadUsers()">Load Users</button>

</body>

</html>

✅ Clicking the button loads data from MySQL via PHP without refreshing the page.

3️⃣ Example: Insert Data into MySQL via AJAX

HTML Form (index.html):

<form id="userForm">
Name: <input type="text" id="name"><br>
Email: <input type="text" id="email"><br>
<button type="button" onclick="addUser()">Add User</button>
</form>
<div id="message"></div>

<script>
function addUser() {
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;

fetch('insert_user.php', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: `name=${name}&email=${email}`
})
.then(response => response.text())
.then(data => {
document.getElementById('message').innerHTML = data;
document.getElementById('userForm').reset();
})
.catch(error => console.error(error));
}
</script>

Name: <input type="text" id="name"><br>

Email: <input type="text" id="email"><br>

</form>

function addUser() {

const name = document.getElementById('name').value;

const email = document.getElementById('email').value;

fetch('insert_user.php', {

method: 'POST',

headers: { 'Content-Type': 'application/x-www-form-urlencoded' },

body: `name=${name}&email=${email}`

})

.then(response => response.text())

.then(data => {

document.getElementById('message').innerHTML = data;

document.getElementById('userForm').reset();

})

.catch(error => console.error(error));

}

</script>

PHP Script (insert_user.php):

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

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

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

$sql = "INSERT INTO users (name, email) VALUES ('$name', '$email')";

if ($conn->query($sql) === TRUE) {
echo "User added successfully!";
} else {
echo "Error: " . $conn->error;
}

$conn->close();
?>

<?php

$conn = new mysqli("localhost", "root", "", "test_db");

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

}

$name = $_POST['name'];

$email = $_POST['email'];

$sql = "INSERT INTO users (name, email) VALUES ('$name', '$email')";

if ($conn->query($sql) === TRUE) {

echo "User added successfully!";

} else {

echo "Error: " . $conn->error;

}

$conn->close();

✅ This allows adding records to MySQL without page reload.

4️⃣ Key Points

AJAX communicates with PHP asynchronously; the page does not reload.
PHP handles server-side logic and interacts with MySQL database.
Data exchange is often done using JSON for structured data.
Use prepared statements for inserts/updates to prevent SQL injection.
Ideal for live search, dynamic tables, chat apps, dashboards, etc.

PHP AJAX & MySQL

PHP AJAX & MySQL Tutorial

1️⃣ How It Works

2️⃣ Example: Fetch Data from MySQL using AJAX

3️⃣ Example: Insert Data into MySQL via AJAX

4️⃣ Key Points

You may also like...

PHP & AJAX Introduction

AJAX with XML Example in PHP

PHP AJAX Live Search Example