PHP 與 Ajax：建立響應式 Ajax 應用程式-php教程-PHP中文網

PHP 與 Ajax：建立響應式 Ajax 應用程式

WBOY

發布： 2024-06-03 11:14:57

原創

379 人瀏覽過

本教學介紹如何使用 PHP 和 Ajax 建立 Ajax 應用程式。首先，建立資料庫和表格（步驟 1），然後建立 PHP 連線（步驟 2）。接下來，編寫 JavaScript 程式碼發送 Ajax 請求（步驟 3），處理 Ajax 請求（步驟 4），最後建立 Web 表單（步驟 5）。透過執行此應用程序，可以確認使用者已成功新增至資料庫。

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

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" 按鈕。您應該會看到一條彈出訊息，確認用戶已成功添加到資料庫中。

拓展學習