AJAX PHP

🐘 AJAX + PHP

Learn how to use AJAX to communicate with PHP scripts on the server. PHP processes the request and sends data back to your JavaScript!


// JavaScript sends data to PHP
fetch('process.php', {
  method: 'POST',
  body: new FormData(document.getElementById('myForm'))
})
.then(response => response.text())
.then(data => console.log(data));

AJAX PHP Methods

📤

GET Requests

Retrieve data from PHP

fetch('data.php?id=123')

📥

POST Requests

Send data to PHP

fetch('save.php', {
  method: 'POST'
})

📋

Form Data

Submit forms via AJAX

new FormData(form)

🔄

JSON Response

PHP returns JSON data

echo json_encode($data);

🔹 Simple PHP AJAX Example

Here's a basic example of AJAX communicating with PHP:

🔸 JavaScript (Frontend)

function loadUserData() {
  fetch('get_user.php?id=1')
    .then(response => response.json())
    .then(user => {
      document.getElementById('user-info').innerHTML = `
        <h3>${user.name}</h3>
        <p>Email: ${user.email}</p>
        <p>Age: ${user.age}</p>
      `;
    })
    .catch(error => {
      console.error('Error:', error);
    });
}

🔸 PHP (Backend)

<?php
// get_user.php
header('Content-Type: application/json');

$user_id = $_GET['id'];

// Simulate database data
$users = [
  1 => [
    'name' => 'John Doe',
    'email' => '[email protected]',
    'age' => 30
  ]
];

if (isset($users[$user_id])) {
  echo json_encode($users[$user_id]);
} else {
  echo json_encode(['error' => 'User not found']);
}
?>

Result:

John Doe

Email: [email protected]

Age: 30

🔹 Form Submission with AJAX

Submit forms to PHP without page reload:

🔸 HTML Form

<form id="contact-form">
  <input type="text" name="name" placeholder="Your Name" required>
  <input type="email" name="email" placeholder="Your Email" required>
  <textarea name="message" placeholder="Your Message" required></textarea>
  <button type="submit">Send Message</button>
</form>
<div id="form-result"></div>

🔸 JavaScript

document.getElementById('contact-form').addEventListener('submit', function(e) {
  e.preventDefault(); // Prevent normal form submission
  
  const formData = new FormData(this);
  
  fetch('contact.php', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    if (data.success) {
      document.getElementById('form-result').innerHTML = 
        '<p style="color: green;">✅ Message sent successfully!</p>';
      this.reset(); // Clear form
    } else {
      document.getElementById('form-result').innerHTML = 
        '<p style="color: red;">❌ Error: ' + data.message + '</p>';
    }
  });
});

🔸 PHP Handler

<?php
// contact.php
header('Content-Type: application/json');

if ($_POST) {
  $name = $_POST['name'];
  $email = $_POST['email'];
  $message = $_POST['message'];
  
  // Validate data
  if (empty($name) || empty($email) || empty($message)) {
    echo json_encode(['success' => false, 'message' => 'All fields required']);
    exit;
  }
  
  // Process the form (save to database, send email, etc.)
  // For demo, we'll just return success
  
  echo json_encode([
    'success' => true, 
    'message' => 'Thank you, ' . $name . '! Message received.'
  ]);
} else {
  echo json_encode(['success' => false, 'message' => 'Invalid request']);
}
?>

🔹 Live Search Example

Create a search that shows results as you type:

🔸 Search Interface

<input type="text" id="search-box" placeholder="Search users...">
<div id="search-results"></div>

<script>
let searchTimeout;

document.getElementById('search-box').addEventListener('input', function() {
  const query = this.value;
  
  // Clear previous timeout
  clearTimeout(searchTimeout);
  
  // Wait 300ms before searching (debounce)
  searchTimeout = setTimeout(() => {
    if (query.length > 2) {
      searchUsers(query);
    } else {
      document.getElementById('search-results').innerHTML = '';
    }
  }, 300);
});

function searchUsers(query) {
  fetch(`search.php?q=${encodeURIComponent(query)}`)
    .then(response => response.json())
    .then(users => {
      let html = '';
      users.forEach(user => {
        html += `<div class="user-result">
          <strong>${user.name}</strong> - ${user.email}
        </div>`;
      });
      document.getElementById('search-results').innerHTML = html;
    });
}
</script>

🔸 PHP Search

<?php
// search.php
header('Content-Type: application/json');

$query = $_GET['q'] ?? '';

// Sample users data
$users = [
  ['name' => 'John Doe', 'email' => '[email protected]'],
  ['name' => 'Jane Smith', 'email' => '[email protected]'],
  ['name' => 'Bob Johnson', 'email' => '[email protected]']
];

$results = [];
foreach ($users as $user) {
  if (stripos($user['name'], $query) !== false || 
      stripos($user['email'], $query) !== false) {
    $results[] = $user;
  }
}

echo json_encode($results);
?>