PHP und Ajax: Erstellen reaktionsfähiger Ajax-Anwendungen

Dieses Tutorial erklärt, wie man Ajax-Anwendungen mit PHP und Ajax erstellt. Erstellen Sie zunächst die Datenbank und die Tabellen (Schritt 1) ​​und stellen Sie dann eine PHP-Verbindung her (Schritt 2). Als nächstes schreiben Sie den JavaScript-Code, um die Ajax-Anfrage zu senden (Schritt 3), die Ajax-Anfrage zu verarbeiten (Schritt 4) und schließlich das Webformular zu erstellen (Schritt 5). Durch Ausführen dieser Anwendung können Sie bestätigen, dass der Benutzer erfolgreich zur Datenbank hinzugefügt wurde.

PHP mit Ajax: Responsive Ajax-Anwendungen erstellen

Einführung

Ajax (Asynchrones JavaScript und XML) ist eine Technologie, die es Webanwendungen ermöglicht, mit Ajax zu arbeiten, ohne die gesamte Serverkommunikation neu zu laden. Dadurch ist es möglich, reaktionsschnelle und benutzerfreundliche Anwendungen zu erstellen. Dieses Tutorial zeigt, wie Sie eine einfache Ajax-Anwendung mit PHP und Ajax erstellen.

Voraussetzungen

• PHP-Server
• MySQL-Datenbank
• Grundkenntnisse in der Webentwicklung

Schritt 1: Datenbank und Tabellen erstellen

Eine MySQL-Datenbank mit dem Namen „Benutzer“ erstellen und eine Tabelle für „Benutzer“ erstellen :

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

Schritt 2: Stellen Sie eine PHP-Verbindung her

Stellen Sie in der PHP-Datei eine Verbindung zur MySQL-Datenbank her:

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

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

Schritt 3: Ajax Schreiben Sie den folgenden JavaScript-Code mit JavaScript

, Es wird gesendet eine Ajax-Anfrage an die Datei 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);
    }
  };
}

Schritt 4: Ajax-Anfragen bearbeiten

Erstellen Sie die Datei add_user.php zur Bearbeitung von Ajax-Anfragen aus JavaScript:

<?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();
?>

Schritt 5: Webformulare

Erstellen Sie ein HTML Formular zur Eingabe des Namens und der E-Mail-Adresse eines Benutzers:

<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>

Ein praktisches Beispiel

Jetzt können Sie diese Ajax-Anwendung ausführen. Öffnen Sie die Entwicklertools Ihres Webbrowsers (z. B. die Chrome-Konsole) und klicken Sie auf die Schaltfläche „Benutzer hinzufügen“. Es sollte eine Popup-Meldung angezeigt werden, die bestätigt, dass der Benutzer erfolgreich zur Datenbank hinzugefügt wurde.

Erweitern Sie Ihr Wissen

• Verwenden Sie JSON und Webdienste für die Dateninteraktion
• Ajax- und PHP-Bibliotheken (z. B. jQuery)
• Best Practices für die Ajax-Sicherheit

Das obige ist der detaillierte Inhalt vonPHP und Ajax: Erstellen reaktionsfähiger Ajax-Anwendungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!