PHP 中的 AJAX 集成

2025年7月23日 | 阅读 3 分钟

AJAX：它是什么？

异步 JavaScript 和 XML 被称为 AJAX。AJAX 是一种使用 XML、HTML、CSS 和 JavaScript 开发更优秀、更快速、更具交互性的在线应用程序的新方法。

传统 Web 应用程序使用同步请求来发送和接收数据。这意味着在填写完表单并点击提交后，您会被带到一个包含服务器更新数据的新页面。使用 AJAX，当点击提交按钮时，JavaScript 会向服务器发送请求，解析响应，然后刷新屏幕。用户甚至不会意识到有任何内容被发送到服务器。

AJAX 的用途

与桌面程序类似，它能够开发丰富、交互式的在线应用程序。

当用户在不提交表单的情况下填写表单时，可以进行验证。可以通过自动完成来实现这一点。用户输入单词，然后将这些单词发送到服务器进行处理。服务器会返回与用户输入相匹配的关键字。根据另一个下拉框的值，可用于填充下拉框。

可以从服务器获取数据并更新页面的某个特定部分，而无需加载整个页面。这对于加载内容的网站部分（如推文、评论、在线用户等）特别有用。

PHP 和 AJAX 示例

以下是一个针对实际用例（员工目录搜索）的详细完整的端到端 AJAX + PHP + MySQL 示例。

步骤 1：SQL：创建 employees 表并插入数据

CREATE TABLE `employees` (
  `emp_id` INT NOT NULL AUTO_INCREMENT,
  `full_name` VARCHAR(100) NOT NULL,
  `department` VARCHAR(50) NOT NULL,
  `designation` VARCHAR(50) NOT NULL,
  `experience` INT NOT NULL,
  PRIMARY KEY (`emp_id`)
);

INSERT INTO `employees` (full_name, department, designation, experience) VALUES
('Alice Thomas', 'HR', 'Recruiter', 3),
('Bob Martin', 'IT', 'Software Engineer', 5),
('Charlie Clark', 'Finance', 'Accountant', 6),
('Diana Prince', 'IT', 'DevOps Engineer', 4),
('Eric Adams', 'HR', 'HR Manager', 7),
('Fiona Carter', 'Finance', 'Analyst', 2),
('George Banks', 'IT', 'Team Lead', 8);

步骤 2：前端 HTML (employee-search.html)

<!DOCTYPE html>
<html>
<head>
  <title>Employee Directory</title>
  <style>
    body { font-family: Arial, sans-serif; margin: 30px; }
    table { border-collapse: collapse; width: 80%; margin-top: 20px; }
    th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
    th { background-color: #f2f2f2; }
  </style>
</head>
<body>

  <h2>Search Employee Directory</h2>

  <label for="dept">Department:</label>
  <select id="dept">
    <option value="">--Select--</option>
    <option value="HR">HR</option>
    <option value="IT">IT</option>
    <option value="Finance">Finance</option>
  </select>

  <label for="minExp">Minimum Experience (Years):</label>
  <input type="number" id="minExp" min="0" value="0"/>

  <button onclick="fetchEmployees()">Search</button>

  <div id="result"></div>

  <script>
    function fetchEmployees() {
      const dept = document.getElementById("dept").value;
      const minExp = document.getElementById("minExp").value;

      const xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          document.getElementById("result").innerHTML = xhr.responseText;
        }
      };

      const query = `?department=${encodeURIComponent(dept)}&experience=${encodeURIComponent(minExp)}`;
      xhr.open("GET", "fetch-employees.php" + query, true);
      xhr.send();
    }
  </script>

</body>
</html> 

步骤 3：后端 PHP (fetch-employees.php)

<?php
// Database config
$host = "localhost";
$username = "your_db_username";
$password = "your_db_password";
$database = "your_db_name";

// Create connection
$conn = new mysqli($host, $username, $password, $database);

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

// Retrieve GET variables with sanitization
$dept = isset($_GET['department']) ? $_GET['department'] : '';
$minExp = isset($_GET['experience']) ? intval($_GET['experience']) : 0;

// Prepare SQL with placeholders
$sql = "SELECT emp_id, full_name, department, designation, experience 
        FROM employees 
        WHERE department LIKE ? AND experience >= ?";

$stmt = $conn->prepare($sql);
$likeDept = $dept !== '' ? $dept : '%';
$stmt->bind_param("si", $likeDept, $minExp);

$stmt->execute();
$result = $stmt->get_result();

// Display result in HTML table
if ($result->num_rows > 0) {
    echo "<h3>Search Results</h3>";
    echo "<table>";
    echo "<tr><th>ID</th><th>Name</th><th>Department</th><th>Designation</th><th>Experience</th></tr>";
    while ($row = $result->fetch_assoc()) {
        echo "<tr>
                <td>{$row['emp_id']}</td>
                <td>{$row['full_name']}</td>
                <td>{$row['department']}</td>
                <td>{$row['designation']}</td>
                <td>{$row['experience']} yrs</td>
              </tr>";
    }
    echo "</table>";
} else {
    echo "<p>No matching employees found.</p>";
}
</tr>";
$stmt->close();
$conn->close();
?> 

输出

示例搜索与输出

搜索参数

部门：IT
最低经验：5

输出

搜索结果

ID	名称	部门	指定	经历
2	Bob Martin	IT	软件工程师	5 年
7	George Banks	IT	团队领导	8 年

下一主题如何在 Visual Studio Code 中运行 PHP 文件

PHP 中的 AJAX 集成

AJAX：它是什么？

AJAX 的用途

PHP 和 AJAX 示例

步骤 1：SQL：创建 employees 表并插入数据

步骤 2：前端 HTML (employee-search.html)

步骤 3：后端 PHP (fetch-employees.php)

示例搜索与输出

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

PHP 教程

控制语句

PHP 函数

PHP 数组

PHP 字符串

PHP 表单

PHP Include

状态管理

PHP 文件

上传下载

PHP JSON

PHP OOPs 概念

PHP MySQLi

PHP Mail

PHP 程序

面试题

PHP MCQ

PHP 数组引用

PHP 字符串引用

PHP 日期/时间

PHP FTP

PHP 数学

相关教程

PHP 主题

PHP 杂项

PHP 中的 AJAX 集成

AJAX：它是什么？

AJAX 的用途

PHP 和 AJAX 示例

步骤 1：SQL：创建 employees 表并插入数据

步骤 2：前端 HTML (employee-search.html)

步骤 3：后端 PHP (fetch-employees.php)

示例搜索与输出

相关帖子

PHP gmp_and() 函数

Imagick transposeImage() 函数

PHP gmp_scan1() 函数

PHP gmp_legendre() 函数

PHP 数据库连接

PHP gmp_add() 函数

PHP IDE 和代码编辑器软件

如何用 APA 格式引用网站

PHP 字符串连接

PHP basename() 函数

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器