Application de la technologie PHP Anti-Shake: prévenir les soumissions répétées des formulaires et améliorer l'expérience utilisateur

Application de la technologie PHP Anti-Shake: prévenir les soumissions répétées des formulaires et améliorer l'expérience utilisateur

Avec le développement d'Internet, la soumission des formulaires est devenue une fonctionnalité indispensable dans les applications Web. Cependant, les soumissions de formulaires répétées peuvent entraîner des erreurs de données ou des exceptions du programme en raison de retards réseau ou d'une mauvaise opération de l'utilisateur. Pour résoudre ce problème, la technologie PHP Anti-Shake peut assurer la précision de la soumission de formulaire et éviter les soumissions répétées.

Qu'est-ce que la technologie anti-Tableau?

La technologie anti-titulaire est une technologie qui contrôle la fréquence de l'opération, garantissant qu'une opération ne sera effectuée qu'une seule fois dans un intervalle de temps spécifié. Lorsque l'action de soumission du formulaire est déclenchée, la technologie anti-tisme définit une minuterie pour s'assurer que l'opération de soumission ne sera effectuée que lorsqu'il n'y a pas de nouveau déclencheur de soumission dans le délai spécifié. Si le bouton Soumettre est à nouveau cliqué pendant la période de la minuterie, la minuterie sera réinitialisée, évitant ainsi les soumissions répétées.

Comment mettre en œuvre la technologie anti-tisme en PHP?

Ensuite, nous utiliserons un exemple concret pour montrer comment mettre en œuvre la technologie anti-tirage dans PHP. Supposons que nous ayons un formulaire d'enregistrement utilisateur qui comprend les champs de nom et de boîte aux lettres. Après que l'utilisateur a soumis le formulaire, les données doivent être enregistrées dans la base de données. Afin de s'assurer que les utilisateurs ne se soumettent pas à plusieurs reprises en raison de clics fréquents de boutons lors de la soumission des formulaires, nous pouvons utiliser la technologie anti-titulaire lors de la soumission des formulaires.

Exemple de code backend PHP:

<?php
// Connectez-vous à la base de données
$mysqli = new mysqli("localhost", "username", "password", "database");

// Vérifiez si la connexion réussit
if ($mysqli-> connect_error) {
    Die ("La connexion a échoué:". $ mysqli-> connect_error);
}

// Obtenir les données de post $ name = $ _post [&#39;name&#39;];
$ email = $ _post [&#39;e-mail&#39;];

// Vérifiez si l&#39;enregistrement existe déjà $ query = "SELECT * dans les utilisateurs où name = &#39;$ name&#39; et email = &#39;$ email&#39;";
$ result = $ mysqli-> requête ($ query);

if ($ result-> num_rows> 0) {
    Echo "Le disque existe déjà";
} autre {
    // insérer un nouvel enregistrement $ insert = "Insérer dans les utilisateurs (nom, e-mail) Valeurs (&#39;$ name&#39;, &#39;$ email&#39;)";
    $ mysqli-> requête ($ insert);
    Echo "enregistrer la sauvegarde avec succès";
}

// ferme la connexion de la base de données $ mysqli-> close ();
?>

Exemples de code HTML et JavaScript frontal:

<form id="myForm" action="form_submit.php" method="POST">
    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <button type="submit" id="submitButton">soumettre</button>
</form>

<script>
var form = document.getElementById("myForm");
var submitButton = document.getElementById("submitButton");
var debounceTimer = null;

form.addEventListener("submit", function(e) {
    e.preventDefault(); // Annuler le comportement de soumission par défaut

    if (debounceTimer) {
        clearTimeout(debounceTimer);
    }

    debounceTimer = setTimeout(function() {
        form.submit(); // Soumission retardée des formulaires
    }, 1000); // Le temps de retard est défini sur1Deuxième
});
</script>

Résumer

Grâce à la combinaison de PHP et de JavaScript, nous pouvons éviter efficacement la soumission répétée des formulaires, assurer la précision des données et le fonctionnement normal du programme. Cette technologie anti-shake améliore non seulement l'expérience utilisateur, mais réduit également les erreurs causées par une mauvaise opération.