با ترکیب AJAX و بانک اطلاعاتی (Database) می‌توانیم داده‌ها را بدون رفرش صفحه دریافت، ارسال و نمایش دهیم.
این روش در وب‌اپلیکیشن‌های دینامیک و پنل‌های مدیریتی بسیار کاربرد دارد.

🔹 1. ساخت جدول نمونه در MySQL

فرض کنید یک جدول با نام users داریم:

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

INSERT INTO users (name, age, email) VALUES
('Ali', 25, 'ali@example.com'),
('Reza', 30, 'reza@example.com');

🔹 2. فایل PHP برای دریافت داده‌ها از دیتابیس

get_users.php

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test_db";

$conn = new mysqli($servername, $username, $password, $dbname);

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

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

$users = array();

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

$conn->close();

echo json_encode($users);
?>

📌 این فایل تمام رکوردهای جدول users را به صورت JSON برمی‌گرداند.

🔹 3. درخواست AJAX برای دریافت داده

fetch("get_users.php")
  .then(response => response.json())
  .then(users => {
    let output = "";
    users.forEach(user => {
      output += `<p>${user.name} - ${user.age} - ${user.email}</p>`;
    });
    document.getElementById("demo").innerHTML = output;
  })
  .catch(error => console.error("Error:", error));

📌 داده‌ها روی صفحه نمایش داده می‌شوند بدون رفرش کامل.

🔹 4. ارسال داده به دیتابیس با POST

add_user.php

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test_db";

$conn = new mysqli($servername, $username, $password, $dbname);

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

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

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

if ($conn->query($sql) === TRUE) {
  echo "New record created successfully";
} else {
  echo "Error: " . $conn->error;
}

$conn->close();
?>

ارسال داده با AJAX (Fetch API)

let formData = new FormData();
formData.append("name", "Sara");
formData.append("age", 28);
formData.append("email", "sara@example.com");

fetch("add_user.php", {
  method: "POST",
  body: formData
})
.then(response => response.text())
.then(data => console.log(data))
.catch(error => console.error("Error:", error));

📌 رکورد جدید بدون رفرش صفحه به دیتابیس اضافه می‌شود.

🔹 5. نکات مهم

• همیشه داده‌ها را قبل از ذخیره در دیتابیس sanitize کنید تا امنیت برقرار باشد.

• پاسخ سرور بهتر است به صورت JSON باشد.

• استفاده از AJAX باعث تجربه کاربری بهتر و سریع‌تر می‌شود.

✅ خلاصه

• AJAX + Database → تعامل مستقیم با دیتابیس بدون رفرش صفحه

• GET → دریافت داده از دیتابیس

• POST → ارسال داده به دیتابیس

• JSON → پردازش آسان داده‌ها در جاوااسکریپت

• Fetch API یا XMLHttpRequest → روش‌های ارسال و دریافت داده