Comment saisir une valeur dans un texte en javascript et interroger la base de données en fonction de la valeur

Avec le développement d'applications Web, JavaScript est devenu l'un des langages côté client les plus populaires. JavaScript peut implémenter diverses fonctions, notamment des pages Web dynamiques, la validation de formulaires, des interfaces utilisateur interactives, des effets d'animation, etc. Dans cet article, nous présenterons comment utiliser JavaScript pour interroger automatiquement la base de données après avoir saisi une valeur dans la zone de texte.

1. Déterminez les données de la requête

Avant d'utiliser JavaScript pour interroger la base de données, vous devez déterminer les données que vous souhaitez interroger. En utilisant des requêtes de base de données, vous pouvez obtenir l'ensemble de données requis. Dans cet exemple, nous allons simuler une base de données du système de gestion des étudiants qui contient des informations sur tous les étudiants, telles que les noms, les notes, etc. Nous utiliserons JavaScript pour interroger automatiquement la base de données afin d'afficher les informations sur les notes de l'étudiant lorsque l'utilisateur entrera le nom de l'étudiant dans la zone de saisie.

2. Établissement d'une connexion à la base de données

Pour interroger la base de données, vous devez vous connecter à la base de données. En utilisant la technologie AJAX, vous pouvez envoyer une requête au serveur et obtenir une réponse sans actualiser la page. Dans cet exemple, nous utiliserons l'objet XMLHttpRequest pour implémenter la requête AJAX. Voici un exemple d'établissement d'une connexion à une base de données :

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        // 处理响应数据
    }
};
xmlhttp.open("GET", "getstudentinfo.php?q=" + str, true);
xmlhttp.send();

Dans le code ci-dessus, nous créons une nouvelle requête AJAX à l'aide de l'objet XMLHttpRequest. Lorsque readyState change, nous appelons une fonction de rappel pour traiter les données de réponse. Parmi eux, l'attribut readyState représente l'état de la requête AJAX et l'attribut status représente le code d'état de la réponse. En appelant la méthode open(), on peut préciser l'URL demandée, ainsi que le type de requête ("GET" ou "POST"). Après avoir appelé la méthode send(), la requête AJAX sera envoyée au serveur.

3. Écoutez les événements de la zone de saisie

Lorsque l'utilisateur saisit des caractères dans la zone de saisie, nous devons interroger la base de données en temps réel pour obtenir les résultats correspondants. Afin d'écouter les événements de la zone de saisie, nous pouvons utiliser la méthode addEventListener() pour associer un gestionnaire d'événements à la zone de saisie. Voici un exemple d'écoute des événements de la zone de saisie :

document.getElementById("input").addEventListener("keyup", function() {
    var input_value = document.getElementById("input").value;
    // 查询数据库
});

Dans le code ci-dessus, nous avons enregistré un gestionnaire d'événements "keyup" via la méthode addEventListener() Lorsque l'utilisateur saisit des caractères dans la zone de saisie, l'événement sera déclenché. . Nous obtenons l'élément de la zone de saisie via la méthode document.getElementById(), puis utilisons l'attribut value pour obtenir la valeur de la zone de saisie.

4. Interrogez la base de données et affichez les résultats

Lorsque l'utilisateur saisit des caractères dans la zone de saisie, nous devons envoyer une requête AJAX au serveur pour obtenir les données correspondantes. Voici un exemple d'interrogation de la base de données et d'affichage des résultats :

document.getElementById("input").addEventListener("keyup", function() {
    var input_value = document.getElementById("input").value;
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("result").innerHTML = this.responseText;
        }
    };
    xmlhttp.open("GET", "getstudentinfo.php?q=" + input_value, true);
    xmlhttp.send();
});

Dans le code ci-dessus, nous envoyons une requête AJAX avec les valeurs d'entrée au serveur et le serveur renverra un fragment HTML contenant les informations sur l'étudiant. Lorsque readyState change, nous stockons les données de réponse dans l'élément result, qui sera utilisé pour afficher les informations sur l'étudiant.

5. Réaliser la complétion automatique

En plus d'interroger automatiquement la base de données lors de la saisie de valeurs dans la zone de saisie, nous pouvons également implémenter la fonction de complétion automatique. Lorsque l'utilisateur saisit des caractères dans la zone de saisie, nous pouvons afficher un menu déroulant avec les options disponibles. Voici un exemple d'implémentation de la saisie semi-automatique :

document.getElementById("input").addEventListener("keyup", function() {
    var input_value = document.getElementById("input").value;
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var options = JSON.parse(this.responseText);
            var ul = document.getElementById("auto-complete");
            ul.innerHTML = "";
            for (var i = 0; i < options.length; i++) {
                var li = document.createElement("li");
                var a = document.createElement("a");
                a.appendChild(document.createTextNode(options[i]));
                a.setAttribute("href", "#");
                li.appendChild(a);
                ul.appendChild(li);
            }
            if (options.length > 0) {
                ul.style.display = "block";
            } else {
                ul.style.display = "none";
            }
        }
    };
    xmlhttp.open("GET", "getstudentnames.php?q=" + input_value, true);
    xmlhttp.send();
});

Dans le code ci-dessus, nous envoyons une requête AJAX avec les valeurs d'entrée au serveur et le serveur renverra un tableau JSON avec les options disponibles. Nous utilisons la méthode JSON.parse() pour convertir les données de réponse en un objet JavaScript. Nous créons ensuite une liste non ordonnée avec des options et l'ajoutons à l'élément de saisie semi-automatique. Si le nombre d'options est supérieur à 0, un menu déroulant s'affiche.

6. Conclusion

Cet article explique comment utiliser JavaScript pour interroger automatiquement la base de données après avoir saisi une valeur dans la zone de texte. En utilisant la technologie AJAX et les écouteurs d'événements, nous pouvons obtenir un moyen puissant et flexible d'interagir avec l'interface utilisateur. Si vous souhaitez en savoir plus sur la technologie JavaScript et AJAX, consultez la littérature et les didacticiels.

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!