Interaction dynamique des données PHP: optimiser les opérations de soumission et de base de données via AJAX

Cet article traite des méthodes de gestion efficace des mises à jour de données dynamiques dans les applications Web, en particulier pour les opérations "accepter" ou "rejeter" des tableaux. En analysant les limites de la soumission traditionnelle des formulaires, nous vous recommandons d'utiliser la technologie AJAX pour mettre en œuvre des demandes asynchrones, évitant ainsi la rafraîchissement de la page et l'amélioration de l'expérience utilisateur. Le tutoriel affichera en détail comment passer en toute sécurité le type de fonctionnement et l'ID de données au script PHP backend pour les opérations de base de données à l'aide des attributs de données HTML5 et de l'API JavaScript Fetch.

Limitations et malentendus de la soumission de forme traditionnelle

Lors de la création d'applications Web dynamiques, nous devons souvent gérer les opérations des utilisateurs sur une ligne de données dans la liste, comme l'acceptation ou le rejet d'une demande. Un malentendu courant consiste à essayer de "définir" la variable _POST par $ _post ['request_id'] = $ requêtes [$ j] ['request_id']; Lorsque PHP génère du HTML. Cette approche n'est pas valide car la variable hyperglobale _POST est remplie après la requête du post HTTP reçue et analysée par le serveur, plutôt que d'attribuer manuellement des valeurs lorsque la page est générée. Lorsque le formulaire est réellement soumis, ces variables affectées manuellement n'existeront plus.

Bien que la méthode de soumission de formulaire traditionnelle () puisse implémenter la soumission des données, elle entraînera les problèmes suivants pour les scénarios où plusieurs lignes de données sont nécessaires pour fonctionner indépendamment:

1. Rafraîchissement de la page: chaque soumission entraînera le rechargement de la page entière et interrompra l'expérience utilisateur.
2. Complexité: si chaque ligne a une forme indépendante, elle entraînera une redondance dans la structure DOM; Si toutes les opérations partagent un formulaire, une logique complexe est nécessaire pour distinguer la ligne fonctionnelle.
3. Pas lisse: une actualisation fréquente de la page réduira l'efficacité du travail lorsque l'utilisateur effectue plusieurs opérations.

Ajax pour le traitement des données asynchrones

Afin de surmonter les limites de la soumission traditionnelle des formulaires, le développement Web moderne adopte généralement les technologies asynchrones JavaScript et XML (AJAX). AJAX permet aux clients d'échanger des données avec le serveur sans recharger toute la page. Cela offre aux utilisateurs une expérience interactive plus fluide et plus rapide.

L'AJAX a un avantage particulièrement évident dans la gestion des scénarios d'acceptation / de rejet pour les données de liste:

• La page reste inchangée après que l'utilisateur clique sur le bouton.
• Seules les données nécessaires sont envoyées au serveur.
• Une fois que le serveur l'a traité, les résultats (tels que le succès, l'échec et les données mises à jour) peuvent être renvoyés au client, et le client met ensuite à jour partiellement la page en fonction des résultats.

Implémentation du traitement de la demande Ajax: partie frontale

Nous utiliserons un exemple pour montrer comment gérer les demandes d'acceptation / refusées dans un tableau à l'aide de l'AJAX.

1. Structure HTML et propriétés de données

Tout d'abord, nous devons préparer les informations nécessaires pour chaque ligne de données et ses boutons de fonctionnement lorsque PHP génère du HTML. Le point clé est:

• Supprimez la balise
  :
  puisque nous utiliserons JavaScript pour envoyer des demandes, la balise HTML
  traditionnelle n'est plus nécessaire.
• ID de ligne: Définissez Request_id sur l'attribut ID de l'élément pour faciliter l'acquisition de JavaScript.
• Attribut de type de données: utilisez des attributs de données HTML5 (tels que Data-Type = 'Accept' ou Data-Type = 'Deny') pour marquer le type d'opération d'un bouton.

Voici l'exemple de code pour PHP pour générer des lignes de table:

  Php pour ($ j = 0; $ j <count requ j :>
    <tr id="'<?" php echo requ j request_id>' class = "table-row">
         Php 
            // Définissez le texte en fonction du type de demande if ($ requêtes [$ j] ['request_type'] == '1') {
                $ request_type = 'candidat';
            } autre {
                $ request_type = 'électeur';
            } 
        ?>
        <td class="School">  = $ request_type?> </td>
        <td class="name">  = $ requêtes [$ j] ['first_name']?> </td>
        <td class="candidats">  = $ requêtes [$ j] ['last_name']?> </td>
        <td> 
            <button data-type="'accepter'" name="Acceptreq" value="req_accepted" type="Button" class="btn btn-sucre"> accepter  
        </button>
</td>
        <td> 
            <button data-type="'deny'" name="denyreq" value="req_dened" type="bouton" class="btn btn-danger"> deny  
        </button>
</td>
    </tr>
 PHP ENDFOR; ?></count>

Remarque: La propriété de type du bouton doit être définie sur le bouton pour empêcher son comportement de validation par défaut.

2. Logique de traitement JavaScript

Ensuite, nous utilisons JavaScript pour écouter les événements de clic de bouton et envoyer une demande Ajax. Ici, nous utilisons l'API Fetch moderne.

 <cript>
    // Créer un objet FormData pour construire un corps de demande de poste LET fd = new FormData ();

    // Sélectionnez tous les boutons avec name = "acceptreq" ou name = "denyreq" document.QuerySelectorall ('bouton [name = "acceptreq"], bouton [name = "denyreq"]'). Foreach (bttn => {
        bttn.addeventListener ('click', fonction (e) {
            // bloque le comportement par défaut des boutons (cela empêchera la soumission du formulaire si le type n'est pas un bouton)
            E.PreventDefault (); 

            // Obtenez l'élément parent <tr> du bouton actuellement cliqué sur LET TR = this.parentNode.closest ('tr');

            // Obtenez Request_id à l'attribut ID de </tr>
<tr>
            fd.set ('id', tr.id.trim ()); // Utilisez TRIM () pour effacer les espaces possibles // Obtenez le type d'opération fd.set ('type', this.dataset.type);

            // Envoi de la demande de poste à l'aide de l'api fetch fetch ('../ actifs / php / accepter-requests.inc.php', { 
                Méthode: «Post», 
                Corps: FD // Utilisez un objet FormData comme corps de demande})
            .Then (r => {
                si (!
                }
                return R.Text (); // analyse la réponse en tant que texte})
            .Then (text => {
                // L'alerte de la fonction de rappel (texte); // Le message renvoyé par le serveur apparaît // TODO: Ici, mettez à jour le DOM en fonction de la réponse du serveur, tel que la suppression de la ligne // tr.Remove ();
            })
            .catch (e => {
                // Capture des erreurs dans la demande de traitement de demande ou de réponse.Error ('Demande a échoué:', e);
                alert («l'opération a échoué, veuillez réessayer.»);
            });
        });
    });
<p> <strong>Code JavaScript Explication détaillée:</strong></p>
<ul>
<li> <strong>FormData ():</strong> est utilisé pour construire un corps de demande sous la forme de paires de valeurs clés, qui est très adaptée à l'envoi de données de formulaire.</li>
<li> <strong>document.QuerySelectorAll ():</strong> Sélectionnez tous les boutons Accepter et rejeter la page.</li>
<li> <strong>foreach () et addEventListener ():</strong> Ajoutez un écouteur d'événements de clic pour chaque bouton.</li>
<li> <strong>e.PreventDefault ():</strong> bloque le comportement par défaut du bouton et garantit que la demande est envoyée par contrôle JavaScript.</li>
<li> <strong>this.parentNode.closest ('tr'):</strong> Cela pointe vers le bouton actuellement cliqué. ParentNode obtient son élément parent <td>, le plus proche ('tr') regarde vers l'élément d'ancêtre </td>
<tr> le plus proche, obtenant ainsi la ligne contenant request_id.<li> <strong>tr.id.trim ():</strong> obtient la valeur d'attribut d'ID <tr> et utilise TRIM () pour supprimer les caractères d'espace blanc possibles.<li> <strong>this.dataset.type:</strong> obtient la valeur de l'attribut de type Data sur le bouton.</li>
<li> <strong>fetch ():</strong> Envoyer la demande HTTP.<ul>
<li> Méthode: «Post»: spécifiez la méthode de demande à publier.</li>
<li> Corps: FD: Envoyez l'objet FormData comme corps de demande.</li>
</ul>
</li>
<li> <strong>.Then ():</strong> la réponse réussie au traitement de la demande de récupération. Le premier .then () vérifie le statut HTTP et le second .then () gère le contenu du corps de réponse.</li>
<li> <strong>.Catch ():</strong> capture les erreurs de réseau qui peuvent se produire pendant le processus de demande ou d'autres erreurs dans la chaîne de promesses.</li>
<li> <strong>DOM UPDATE (TODO):</strong> Dans les applications réelles, après avoir réussi à traiter la demande, vous écrivez généralement du code ici pour mettre à jour l'interface utilisateur, comme la suppression des lignes acceptées / rejetées de la table ou la mise à jour de l'affichage d'état des lignes.</li>
<h3> Implémentation du traitement de la demande AJAX: partie PHP backend (accepte-requests.inc.php)</h3>
<p> Du côté du serveur (par exemple, le fichier ../assets/php/accept-requests.inc.php), vous devez écrire du code PHP pour recevoir des données envoyées par les demandes AJAX et effectuer les opérations de base de données correspondantes.</p>
<pre class="brush:php;toolbar:false">  Php
// Assurez-vous de traiter uniquement les demandes de publication si ($ _server ['request_method'] === 'post') {
    // Obtenez les données envoyées par le frontal $ demandeId = $ _post ['id'] ?? nul;
    $ ActionType = $ _post ['type'] ?? nul;

    // Vérifiez les données if ($ requedId === null || $ actionType === null) {
        http_response_code (400); // Mauvaise demande
        Echo "Erreur: ID de demande manquant ou type d'opération.";
        sortie();
    }

    // Connexion de la base de données (veuillez la remplacer par votre code de connexion de base de données réel)
    $ servername = "localhost";
    $ username = "nom d'utilisateur";
    $ mot de passe = "mot de passe";
    $ dbname = "your_database";

    essayer {
        $ conn = new PDO ("mysql: host = $ servername; dbname = $ dbname", $ username, $ mot de passe);
        $ Conn-> setAttribute (PDO :: att_errMode, PDO :: errMode_Exception);

        $ ResponseMessage = "";

        switch ($ ActionType) {
            cas «accepter»:
                // Exécuter la logique d'acceptation, telle que la mise à jour de l'état ou la suppression de la demande $ stmt = $ con-> prépare ("supprimer des demandes où request_id =: id");
                $ stmt-> bindParam (': id', $ requestId, pdo :: param_int);
                $ stmt-> execute ();
                $ ResponseMessage = "Request {$ requestId} est accepté et supprimé.";
                casser;
            cas «nier»:
                // Exécuter la logique de rejet, telle que la mise à jour de l'état ou la suppression de la demande $ stmt = $ con-> prépare ("Supprimer des demandes où request_id =: id");
                $ stmt-> bindParam (': id', $ requestId, pdo :: param_int);
                $ stmt-> execute ();
                $ ResponseMessage = "Request {$ requestId} a été rejeté et supprimé.";
                casser;
            défaut:
                http_response_code (400); // Mauvaise demande
                Echo "Erreur: type d'opération non valide.";
                sortie();
        }

        écho $ de réponse; // Renvoie le message de réussite au frontal} catch (pDoException $ e) {
        http_response_code (500); // Erreur interne du serveur
        Echo "L'opération de base de données a échoué:". $ e-> getMessage ();
    } enfin {
        $ conn = null; // Fermer la connexion de la base de données}

} autre {
    http_response_code (405); // Méthode non autorisée
    ECHO "Seules les demandes de poste sont autorisées.";
}
?>

Explication détaillée du code PHP:

• $ _Server ['request_method']: assurez-vous que seules les demandes de publication peuvent saisir la logique de traitement.
• $ _Post ['id'] et $ _post ['type']: php analysera automatiquement les données envoyées par formdata et y accédera via une variable hyperglobale $ _post.
• Vérification des données: Avant de traiter les données, assurez-vous de vérifier que Request_id et ActionType existent et sont efficaces, ce qui est une exigence de base pour la sécurité et la robustesse.
• Opérations de la base de données: utilisez PDO pour la connexion et le fonctionnement de la base de données. Il est recommandé d'utiliser des instructions de prétraitement (préparer et bindparam) pour éviter les attaques d'injection SQL.
• Instruction Switch: Exécutez différentes logiques métier (accepter ou rejeter) en fonction de la valeur de ActionType.
• Réponse: renvoyez le résultat de traitement (tel que le message de réussite ou le message d'erreur) à l'avant via Echo.
• Code d'état HTTP: Définition du code d'état HTTP approprié (tel que 200 OK, 400 Bad Request, 500 Erreur du serveur interne, 405 Méthode non autorisée) aide le frontal à mieux comprendre la réponse du serveur.

Embellissement du style (CSS)

Pour fournir une meilleure rétroaction visuelle, certains styles CSS peuvent être ajoutés, tels que les effets de souris.

 * {
  Transition: facilité de toutes les 100 ms;
  Font-Family: Monospace
}
ème{
  Contexte: RGBA (50,50,100,0,5);
  Couleur: blanc;
}
tr {
  marge: 0,25rem;
}
tr: Hover td {
  Contexte: RGBA (0,200,0,0,25);
}
TD,
ème{
  marge: 0,25rem;
  Border: 1px RGBA en pointillé (0,0,0,0,3);
  rembourrage: 0,45rem
}
Bouton: Hover {
  curseur: pointeur;
}
[Data-Type = 'Accept']: Hover {
  Contexte: citron vert
}
[Data-Type = 'Deny']: Hover {
  Contexte: rouge;
  Couleur: blanc;
}

Résumé et meilleures pratiques

Grâce à ce tutoriel, nous avons appris à utiliser la technologie AJAX, en particulier l'API Fetch, pour optimiser l'interaction dynamique des données dans les applications Web. Cette méthode améliore non seulement l'expérience utilisateur, mais rend également la séparation logique entre le front-end et le back-end plus claire.

Revue des points clés:

• Évitez la définition manuelle de $ _POST: $ _POST est automatiquement rempli lorsque le serveur résout la demande.
• * Utilisez `Data- ` Attribut: ** Stockez les petites données liées aux éléments de HTML, ce qui est pratique pour JavaScript à obtenir.
• AJAX (API Fetch): implémentez les demandes asynchrones pour éviter la rafraîchissement de la page.
• Objet FormData: Construire facilement le corps de la demande de poste.
• Traitement PHP backend: recevez des données $ _post, effectuez des opérations de base de données et renvoyez une réponse.
• Sécurité: Vérifiez et filtrez toujours toutes les entrées utilisateur, en utilisant des instructions de prétraitement pour empêcher l'injection SQL.
• Commentaires de l'utilisateur: Fournissez des instructions de chargement pendant la demande AJAX et donnez des commentaires clairs après que la demande réussit ou échoue (telles que les invites de message, les mises à jour DOM).

En suivant ces principes, vous pouvez créer des applications Web plus efficaces et conviviales.

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!