PHP et Ajax : créer des applications Ajax réactives

Ce tutoriel explique comment créer des applications Ajax en utilisant PHP et Ajax. Créez d’abord la base de données et les tables (étape 1), puis établissez une connexion PHP (étape 2). Ensuite, écrivez le code JavaScript pour envoyer la requête Ajax (étape 3), gérez la requête Ajax (étape 4) et enfin créez le formulaire Web (étape 5). En exécutant cette application, vous pouvez confirmer que l'utilisateur a été ajouté avec succès à la base de données.

PHP avec Ajax : Création d'applications Ajax réactives

Introduction

Ajax (JavaScript asynchrone et XML) est une technologie qui permet aux applications Web de fonctionner avec Ajax sans recharger la totalité de la communication du serveur. Cela permet de créer des applications réactives et conviviales. Ce didacticiel montre comment créer une application Ajax simple à l'aide de PHP et Ajax. "Utilisateurs" :

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

Étape 2 : Établissez une connexion PHP

Dans le fichier PHP, établissez une connexion à la base de données MySQL :

• <?php
  $servername = "localhost";
  $username = "root";
  $password = "";
  $dbname = "users";
  
  // Create connection
  $conn = new mysqli($servername, $username, $password, $dbname);
  ?>

• Étape 3 : Ajax Écrivez le code JavaScript suivant en utilisant JavaScript
• , il enverra une requête Ajax vers le fichier 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);
    }
  };
}

Étape 4 : Gestion des requêtes Ajax

Créez le fichier add_user.php pour gérer les requêtes Ajax depuis 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();
?>

Étape 5 : Formulaires Web

Créer un code HTML formulaire pour saisir le nom et l'e-mail d'un utilisateur :

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

Un exemple pratique

Vous pouvez maintenant exécuter cette application Ajax. Ouvrez les outils de développement de votre navigateur Web (tels que la console Chrome) et cliquez sur le bouton « Ajouter un utilisateur ». Vous devriez voir un message contextuel confirmant que l'utilisateur a été ajouté avec succès à la base de données.

Développez votre apprentissage

Utilisez JSON et les services Web pour l'interaction des données

Bibliothèques Ajax et PHP (par exemple jQuery)

Meilleures pratiques de sécurité Ajax

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!