PHP & AJAX

⚡ PHP & AJAX Tutorial

AJAX (Asynchronous JavaScript and XML) allows dynamic communication between the client and server without reloading the page. Combining AJAX with PHP lets you fetch, insert, update, or delete data dynamically on your website.

1️⃣ How AJAX Works with PHP

User triggers an event (e.g., button click, form submission).
JavaScript sends an asynchronous request to a PHP script.
PHP processes the request (e.g., fetches data from MySQL, processes form input).
PHP returns data (text, HTML, JSON, or XML).
JavaScript updates the webpage dynamically without refreshing.

2️⃣ Simple Example – Fetch Data from PHP

HTML + JavaScript (index.html):

<!DOCTYPE html>
<html>
<head>
<title>AJAX with PHP Example</title>
<script>
function fetchData() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("result").innerHTML = xhr.responseText;
}
};
xhr.open("GET", "fetch.php", true);
xhr.send();
}
</script>
</head>
<body>
<h2>AJAX + PHP Example</h2>
<button onclick="fetchData()">Load Data</button>
<div id="result"></div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>AJAX with PHP Example</title>

function fetchData() {

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {

if (xhr.readyState == 4 && xhr.status == 200) {

document.getElementById("result").innerHTML = xhr.responseText;

}

};

xhr.open("GET", "fetch.php", true);

xhr.send();

}

</script>

</head>

<body>

<h2>AJAX + PHP Example</h2>

</body>

</html>

PHP (fetch.php):

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

3️⃣ AJAX with PHP and MySQL (JSON Response)

PHP (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();

JavaScript (index.html):

function loadUsers() {
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));
}

function loadUsers() {

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));

}

HTML Button:

✅ Fetches user data from MySQL via PHP asynchronously and displays it dynamically.

4️⃣ Key Points

AJAX allows partial page updates; the page doesn’t reload.
PHP handles server-side logic and returns data.
Data can be text, HTML, JSON, or XML.
Modern JavaScript uses Fetch API, but XMLHttpRequest also works.
AJAX + PHP is widely used in live search, dynamic forms, chat apps, and dashboards.

PHP & AJAX

⚡ PHP & AJAX Tutorial

1️⃣ How AJAX Works with PHP

2️⃣ Simple Example – Fetch Data from PHP

3️⃣ AJAX with PHP and MySQL (JSON Response)

4️⃣ Key Points

You may also like...

Leave a Reply Cancel reply

PHP & AJAX

⚡ PHP & AJAX Tutorial

1️⃣ How AJAX Works with PHP

2️⃣ Simple Example – Fetch Data from PHP

3️⃣ AJAX with PHP and MySQL (JSON Response)

4️⃣ Key Points

You may also like...

PHP XML Parsers

PHP File Open / Read / Close

PHP File Handling

Leave a Reply Cancel reply