本教程介绍如何使用 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 <a style='color:#f60; text-decoration:underline;' href="https://www.php.cn/zt/15713.html" target="_blank">mysql</a>i($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” 按钮。您应该会看到一条弹出消息，确认用户已成功添加到数据库中。
拓展学习
- 使用 JSON 和 Web 服务进行数据交互
- Ajax 和 PHP 库（例如 jQuery）
- Ajax 安全性最佳实践
以上就是PHP 与 Ajax：构建响应式 Ajax 应用程序的详细内容，更多请关注php中文网其它相关文章！