PHP 与 AJAX 学习笔记

简介

PHP 是一种脚本语言，可嵌入到 HTML 中使用。它的主要用途是在服务器端处理网页。另一方面，AJAX 是一种技术，可以通过 JavaScript 代码向服务器发送请求并接收响应，然后更新网页内容而不必刷新整个页面。结合使用 PHP 和 AJAX 可以达到更好的用户体验和交互效果。

使用 AJAX 发送 HTTP 请求

在 JavaScript 中可以使用 XMLHttpRequest 对象来发送 HTTP 请求，从而实现向服务器发送请求并接收响应的功能。以下是一个简单的示例：

javascriptCopy Code
let xhr = new XMLHttpRequest();
xhr.open('GET', 'example.php');
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  } else {
    console.error('Request failed. Returned status code ' + xhr.status);
  }
};
xhr.send();

在 PHP 中处理 AJAX 请求

在 PHP 中可以通过 $_POST 或 $_GET 来获取 AJAX 发送的数据，然后进行相应的处理，并返回响应数据。以下是一个简单的示例：

phpCopy Code
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $name = $_POST['name'];
  $age = $_POST['age'];
  // 处理数据
  $result = [
    'name' => $name,
    'age' => $age,
  ];
  echo json_encode($result); // 将结果返回
}
?>

AJAX 实例

下面是一个使用 AJAX 和 PHP 实现动态加载数据的示例。HTML 代码如下：

htmlCopy Code
<button id="btn">加载数据</button>
<div id="result"></div>

JavaScript 代码如下：

javascriptCopy Code
let btn = document.getElementById('btn');
let resultDiv = document.getElementById('result');
btn.addEventListener('click', function() {
  let xhr = new XMLHttpRequest();
  xhr.open('POST', 'example.php');
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.onload = function() {
    if (xhr.status === 200) {
      let result = JSON.parse(xhr.responseText);
      resultDiv.innerHTML = '姓名：' + result.name + '<br>年龄：' + result.age;
    } else {
      console.error('Request failed. Returned status code ' + xhr.status);
    }
  };
  let name = '张三';
  let age = 20;
  let data = 'name=' + encodeURIComponent(name) + '&age=' + encodeURIComponent(age);
  xhr.send(data);
});

PHP 代码如下：

phpCopy Code
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  $name = isset($_POST['name']) ? $_POST['name'] : '';
  $age = isset($_POST['age']) ? $_POST['age'] : '';
  // 处理数据
  $result = [
    'name' => $name,
    'age' => $age,
  ];
  echo json_encode($result); // 将结果返回
}
?>

运行以上代码，点击“加载数据”按钮即可向服务器发送 AJAX 请求并接收响应，然后在页面上动态展示返回的数据。