首页　>　文章列表　>　PHP 与 Ajax：构建响应式 Ajax 应用程序

PHP 与 Ajax：构建响应式 Ajax 应用程序

php ajax
439 2024-05-16

本教程介绍如何使用 PHP 和 Ajax 构建 Ajax 应用程序。首先，创建数据库和表（步骤 1），然后建立 PHP 连接（步骤 2）。接下来，编写 JavaScript 代码发送 Ajax 请求（步骤 3），处理 Ajax 请求（步骤 4），最后创建 Web 表单（步骤 5）。通过运行此应用程序，可以确认用户已成功添加到数据库中。

PHP 与 Ajax：构建响应式 Ajax 应用程序

简介

Ajax（异步 JavaScript 和 XML）是一种技术，允许 Web 应用程序在不重新加载整个页面的情况下与服务器通信。这使得构建响应式且用户友好的应用程序成为可能。本教程演示了如何使用 PHP 和 Ajax 构建简单的 Ajax 应用程序。

先决条件

PHP 服务器
MySQL 数据库
基本 Web 开发知识

步骤 1：创建数据库和表

创建一个名为 "users" 的 MySQL 数据库，并创建一个名为 "users" 的表：

CREATE TABLE users (
  id INT NOT NULL AUTO_INCREMENT,
  name VARCHAR(255) NOT NULL,
  email VARCHAR(255) NOT NULL,
  PRIMARY KEY (id)
);

步骤 2：建立 PHP 连接

在 PHP 文件中，建立与 MySQL 数据库的连接：

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

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
?>

步骤 3：Ajax 使用 JavaScript

编写以下 JavaScript 代码，它将发送一个 Ajax 请求到 add_user.php 文件：

function addUser() {
  var name = document.getElementById("name").value;
  var email = document.getElementById("email").value;

  var xhr = new XMLHttpRequest();
  xhr.open("POST", "add_user.php", true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.send("name=" + name + "&email=" + email);

  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var response = this.responseText;
      alert(response);
    }
  };
}

步骤 4：处理 Ajax 请求

创建 add_user.php 文件，处理来自 JavaScript 的 Ajax 请求：

<?php
// Get the form data
$name = $_POST['name'];
$email = $_POST['email'];

// Insert data into the database
$stmt = $conn->prepare("INSERT INTO users (name, email) VALUES (?, ?)");
$stmt->bind_param("ss", $name, $email);
$stmt->execute();

// Send a success message back to the client
echo "User added successfully!";

// Close the database connection
$conn->close();
?>

步骤 5：Web 表单

创建一个 HTML 表单，用于输入用户姓名和电子邮件：

<form>
  <label for="name">Name:</label>
  <input type="text" id="name">

  <label for="email">Email:</label>
  <input type="text" id="email">

  <button type="button" onclick="addUser()">Add User</button>
</form>

实战案例

现在，您可以运行此 Ajax 应用程序。打开 Web 浏览器的开发者工具（如 Chrome 的控制台），然后单击 "Add User" 按钮。您应该会看到一条弹出消息，确认用户已成功添加到数据库中。

拓展学习