PHP と Ajax: 応答性の高い Ajax アプリケーションの構築

このチュートリアルでは、PHP と Ajax を使用して Ajax アプリケーションを構築する方法を説明します。まず、データベースとテーブルを作成し (ステップ 1)、次に PHP 接続を確立します (ステップ 2)。次に、Ajax リクエストを送信するための JavaScript コードを記述し (ステップ 3)、Ajax リクエストを処理し (ステップ 4)、最後に Web フォームを作成します (ステップ 5)。このアプリケーションを実行すると、ユーザーがデータベースに正常に追加されたことを確認できます。

Ajax を使用した PHP: 応答性の高い Ajax アプリケーションの構築

はじめに

Ajax (非同期 JavaScript および XML) は、ページ全体のサーバー通信をリロードすることなく Web アプリケーションが Ajax と連携できるようにするテクノロジーです。これにより、応答性が高く、ユーザーフレンドリーなアプリケーションを構築することが可能になります。このチュートリアルでは、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 コードを記述します

、送信されますadd_user.php ファイルへの Ajax リクエスト:

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 リクエストを処理する

JavaScript からの Ajax リクエストを処理するために add_user.php ファイルを作成する:

<?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 のコンソールなど) を開き、[ユーザーの追加] ボタンをクリックします。ユーザーがデータベースに正常に追加されたことを確認するポップアップ メッセージが表示されます。

学習を拡大しましょう

• データ対話にJSONとWebサービスを使用します
• AjaxとPHPライブラリ(例：jQuery)
• Ajaxセキュリティのベストプラクティス

以上がPHP と Ajax: 応答性の高い Ajax アプリケーションの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。