Utilisation de Ajax pour livrer l'adresse

à l'intérieur du dossier JS, à c?té du fichier prototype.js, se trouve un fichier appelé MaillingList.js. Ce fichier contient le code qui pilote la fonctionnalité AJAX spécifique à cette page. Notre premier élément d'activité dans ce fichier est d'ajouter un écouteur d'événements à l'événement de soumission de l'élément de formulaire, qui déclenchera l'appel AJAX au serveur. Cependant, nous ne pouvons pas le faire immédiatement - nous devons attendre que la page soit chargée, ce qui est signifié par l'événement de charge de l'objet de fenêtre.

Pour ajouter ces auditeurs d'événements, nous utiliserons la méthode d'observation pratique du prototype. Nous ajoutons d'abord un écouteur pour l'événement de chargement de la page. à l'intérieur de cet auditeur, nous joignons un auditeur d'événements à l'événement de soumission de notre formulaire:

// Attach handler to window load event <br>
Event.observe(window, 'load', init, false); <br>
 <br>
function init() { <br>
 ?// Attach handler to form's submit event <br>
 ?Event.observe('addressForm', 'submit', storeAddress); <br>
}

Notez que l'écouteur d'événements de notre formulaire appellera la fonction JavaScript Storeaddress lorsque le formulaire sera soumis. Cette fonction Storeaddress contient le javascript pour passer un appel ajax à notre script PHP. Voici à quoi ?a ressemble:

function storeAddress(e) { <br>
 ?// Update user interface <br>
 ?$('response').innerHTML = 'Adding email address...'; <br>
 ?// Prepare query string and send AJAX request <br>
 ?var pars = 'address=' + escape($F('address')); <br>
 ?var myAjax = new Ajax.Updater('response', 'ajaxServer.php', {method: 'get', parameters: pars}); <br>
 ?// Stop form from submitting when JavaScript is enabled <br>
 ?Event.stop(e); <br>
}

Cette fonction est très simple. Cela commence par laisser l'utilisateur que quelque chose se passe en affichant un message ?Ajout d'adresse e-mail…?. Ensuite, nous collectons les informations du formulaire en préparation de l'envoi d'une demande Ajax. Remarquez comment nous accédons au contenu du champ de texte à l'aide de la fonction $ F du prototype, qui saisit la valeur d'un élément de formulaire donné lorsqu'il est fourni avec l'ID de cet élément de formulaire. Nous utilisons la fonction d'échappement JavaScript pour convertir l'entrée utilisateur au format Unicode; De cette fa?on, son URL est prête à livrer au script PHP via la méthode GET.

vient alors la partie la plus importante de cette fonction: la création d'un nouvel objet ajax.updater. Lorsque nous créons un objet ajax.updater, nous lui transmettons certains paramètres, y compris:

1. L'ID de l'élément dans lequel vous souhaitez afficher la réponse du serveur


2. L'URL du script PHP


3. les données que vous souhaitez envoyer au script c?té serveur et la méthode de livraison (c'est-à-dire publier ou obtenir)

L'Ajax.updater enverra l'adresse e-mail au serveur et attendra patiemment une réponse. Lorsqu'il re?oit une réponse, il l'affichera à la place du message ?Ajout d'adresse e-mail…? que nous avons inséré au début de la méthode. Enfin, nous appelons event.stop (une autre fonction fournie par la bibliothèque prototype) pour empêcher le formulaire d'être soumis au serveur.

Configurez votre base de données de liste de diffusion

Avant de pouvoir écrire n'importe quel PHP pour stocker les adresses e-mail, nous avons besoin d'un endroit pour les mettre. Ce SQL créera une table nommée Maillist pour vous:

// Attach handler to window load event <br>
Event.observe(window, 'load', init, false); <br>
 <br>
function init() { <br>
 ?// Attach handler to form's submit event <br>
 ?Event.observe('addressForm', 'submit', storeAddress); <br>
}

inclus dans l'archive de code est un fichier PHP appelé createTable.php, qui créera ce tableau pour vous. Cependant, avant d'exécuter ce fichier, vous devrez mettre à jour le fichier dbConstants.php avec les détails de votre base de données MySQL. Je vous suggère de mettre à jour ce fichier maintenant, car nous utiliserons ces constantes dans la section suivante.

Stockage de l'adresse e-mail

Nous avons tout configuré pour livrer l'adresse au serveur; Maintenant, PHP terminera le processus en stockant l'adresse dans votre base de données et en renvoyant une cha?ne à notre objet Ajax pour indiquer le succès ou l'échec. Jetons un coup d'?il au fichier ajaxserver.php auquel l'adresse e-mail est envoyée.

function storeAddress(e) { <br>
 ?// Update user interface <br>
 ?$('response').innerHTML = 'Adding email address...'; <br>
 ?// Prepare query string and send AJAX request <br>
 ?var pars = 'address=' + escape($F('address')); <br>
 ?var myAjax = new Ajax.Updater('response', 'ajaxServer.php', {method: 'get', parameters: pars}); <br>
 ?// Stop form from submitting when JavaScript is enabled <br>
 ?Event.stop(e); <br>
}

Ce script PHP très simple appelle une fonction appelée Storeaddress et revient à l'objet Ajax le message renvoyé par Storeaddress. La communication avec l'objet Ajax est aussi simple que d'imprimer une cha?ne.

La première chose que fait Storeaddress est d'initialiser une variable appelée $ message à un espace non révolutionnaire. Ensuite, il s'assure que le script a re?u une adresse e-mail dans la cha?ne de requête. Si ce n'est pas le cas, nous laisserons un ensemble de variables de message $ comme un espace non révolutionnaire. $ le message sera retourné à l'appelant à la fin de cette fonction.

CREATE TABLE `mailinglist` ( <br>
 ?`id` INT NOT NULL AUTO_INCREMENT , <br>
 ?`email` TEXT NOT NULL , <br>
 ?PRIMARY KEY ( `id` ) <br>
);

Une fois que nous sommes certains que nous avons une adresse e-mail pour travailler, nous voulons nous assurer que c'est une adresse valide. Nous utiliserons une expression régulière pour rechercher des caractères alphanumériques suivis du @ symbole, plus de caractères alphanumériques, une période et des caractères plus alphanumériques. Si ce test échoue, nous allons définir un message $ sur un message d'erreur, informant l'utilisateur que l'adresse e-mail saisie n'était pas valide:

<?php <br>
require_once("inc/storeAddress.php"); <br>
echo(storeAddress()); <br>
?>

Si l'adresse passe ce test, nous le stockons dans la base de données. Pour ce faire, nous nous connectons à MySQL, sélectionnons la base de données et exécutons notre requête d'insertion. Si l'adresse a été stockée correctement, nous définissons $ message sur un message de réussite; Sinon, nous définissons $ message sur un message d'erreur.

function storeAddress() { <br>
 ?$message = " "; <br>
 ?// Check for an email address in the query string <br>
 ?if( !isset($_GET['address']) ){ <br>
 ? ?// No email address provided <br>
 ?}

Enfin, nous retournons $ message à ajaxserver.php:

 ?else { <br>
 ? ?// Get email address from the query string <br>
 ? ?$address = $_GET['address']; <br>
 ? ?// Validate Address <br>
 ? ?if(!preg_match("/^[_a-z0-9-]+(.[_a-z0-9-]+)*@ <br>
 ? ?[a-z0-9-]+(.[a-z0-9-]+)*$/i", $address)) { <br>
 ? ? ?$message = "<strong>Error</strong>: An invalid email address was provided."; <br>
 ? ?}

Maintenant, chargez la page, entrez votre adresse e-mail et soumettez le formulaire - vous devriez voir votre adresse e-mail ajoutée à la table de liste de diffusion sans recharger la page. Même si vous désactivez JavaScript, la page fonctionnera de manière très similaire, sauf qu'au lieu d'insérer la sortie de Storeaddress dans la page à l'aide de JavaScript, il est inséré directement dans le HTML dans le code PHP de la page.

Ajax fait vraiment de l'inscription à votre liste de diffusion un morceau de gateau. Il n'y a pas d'attente pour que la page recharge, ce qui interrompt l'expérience de navigation de votre visiteur, et il n'est pas nécessaire d'exclure ceux qui parcourent avec JavaScript handicapé. Le prototype rend le processus de création de fonctionnalités AJAX rapidement et indolore, vous permettant de rester en contact étroit avec les fans de votre site.

Les questions fréquemment posées (FAQ) sur l'utilisation de l'Ajax avec PHP pour créer une liste de diffusion

Comment puis-je utiliser AJAX avec PHP pour créer une liste de diffusion?

AJAX, qui signifie JavaScript asynchrone et XML, est une technique de développement Web utilisée pour créer des applications Web interactives. PHP est un langage de script c?té serveur con?u pour le développement Web. Lorsqu'il est combiné, Ajax et PHP peuvent être utilisés pour créer une liste de diffusion en envoyant des données d'un formulaire à un script c?té serveur (PHP) sans rafra?chir la page. Cela se fait à l'aide de l'objet XMLHttpRequest dans Ajax, qui communique avec le serveur et met à jour le contenu de la page de manière asynchrone.

Quel est le r?le de l'objet XMLHTTPREQUEST dans AJAX?

L'objet XMLHTTPREQUEST dans AJAX? Il est utilisé pour envoyer et recevoir des données d'un serveur de manière asynchrone, ce qui signifie qu'il échange des données dans les coulisses avec le serveur et met à jour les parties d'une page Web sans recharger toute la page.

Comment puis-je gérer les réponses AJAX dans PHP?

Les réponses AJAX peuvent être gérées par PHP en utilisant l'écho. L'instruction ECHO est utilisée pour produire une ou plusieurs cha?nes. Dans le contexte de l'AJAX, l'instruction ECHO peut être utilisée pour renvoyer une réponse à la demande Ajax.

Comment puis-je utiliser jQuery avec Ajax et PHP?

jQuery est une bibliothèque JavaScript rapide, petite et riche en fonctionnalités. Cela rend des choses comme la traversée et la manipulation de documents HTML, la gestion des événements et l'animation beaucoup plus simples avec une API facile à utiliser qui fonctionne à travers une multitude de navigateurs. Avec une combinaison de polyvalence et d'extensibilité, JQuery a changé la fa?on dont des millions de personnes écrivent JavaScript. Vous pouvez utiliser les méthodes AJAX de JQuery pour envoyer des demandes HTTP asynchrones à vos scripts PHP.

Comment puis-je déboguer Ajax et PHP?

Le débogage AJAX et PHP peut être un peu délicat parce que Ajax fonctionne asynchronisé. Cependant, vous pouvez utiliser les outils de développeur du navigateur pour inspecter les demandes et les réponses de l'AJAX. Vous pouvez également utiliser les fonctions de rapport d'erreur de PHP pour attraper et gérer les erreurs dans vos scripts PHP.

Comment puis-je gérer les erreurs dans AJAX et PHP?

Gestion des erreurs dans AJAX et PHP peut être effectuée en utilisant la méthode Error () dans Ajax et la fonction DIE () dans PHP. La méthode Error () est appelée si la demande échoue. La fonction Die () imprime un message et quitte le script actuel.

Comment puis-je utiliser AJAX pour soumettre un formulaire à un script PHP?

Vous pouvez utiliser la méthode post () d'Ajax pour soumettre un formulaire à un script PHP. La méthode post () envoie une demande de post au serveur, et elle peut envoyer des données de formulaire à traiter par le script PHP.

Comment puis-je utiliser AJAX pour mettre à jour une base de données à l'aide de PHP?

Vous pouvez utiliser AJAX pour envoyer des données à un script PHP, qui peut ensuite mettre à jour une base de données. Cela se fait à l'aide de la méthode post () dans AJAX, qui envoie une demande de post au serveur avec les données à mettre à jour.

Comment puis-je utiliser AJAX pour récupérer des données à partir d'une base de données à l'aide de PHP?

Vous pouvez utiliser AJAX pour envoyer une demande à un script PHP pour récupérer les données d'une base de données. Le script PHP peut ensuite renvoyer une réponse à la demande AJAX avec les données récupérées.

Comment puis-je utiliser AJAX pour supprimer les données d'une base de données à l'aide de PHP?

Vous pouvez utiliser AJAX pour envoyer une demande à un script PHP pour supprimer les données d'une base de données. Le script PHP peut ensuite renvoyer une réponse à la demande AJAX pour confirmer que les données ont été supprimées.

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!