Send and Receive JSON with PHP and AJAX

Create an interactive front-end using AJAX and PHP to send and receive JSON data for dynamic web applications.

📌 Why Use AJAX with JSON in PHP?

AJAX allows you to send and receive data asynchronously without reloading the page. Combining it with JSON , the most popular data exchange format , and PHP on the server creates responsive and modern web applications.

📝 Step 1: HTML Form

<form id="userForm" onsubmit="submitForm(event)">
  <input type="text" name="username" placeholder="Enter username" required>
  <input type="email" name="email" placeholder="Enter email" required>
  <button type="submit">Submit</button>
</form>

<div id="response"></div>

📜 Step 2: JavaScript AJAX Request

<script>
function submitForm(event) {
  event.preventDefault();

  const form = document.getElementById("userForm");
  const formData = new FormData(form);
  const data = Object.fromEntries(formData);

  fetch("handler.php", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(data)
  })
  .then(response => response.json())
  .then(result => {
    document.getElementById("response").innerText = result.message;
  })
  .catch(error => {
    console.error("Error:", error);
  });
}
</script>

🛠️ Step 3: PHP Handler

<?php
// handler.php
header("Content-Type: application/json");

$data = json_decode(file_get_contents("php://input"), true);

if (isset($data['username'], $data['email'])) {
  $username = htmlspecialchars($data['username']);
  $email = htmlspecialchars($data['email']);

  // Simulate storing in database or sending email
  $response = [
    "status" => "success",
    "message" => "Received data for $username at $email."
  ];
} else {
  $response = [
    "status" => "error",
    "message" => "Invalid input received."
  ];
}

echo json_encode($response);
?>

The PHP script reads JSON input, processes it, and returns a JSON response.

🔐 Security Tips

• Always sanitize and validate user inputs
• Set Content-Type to application/json
• Use HTTPS to encrypt data transmission
• Log any unexpected errors or failed requests