Comment implémenter la fonction de requête de mot-clé d'entrée dans jquery

JQuery est l'une des bibliothèques JavaScript les plus utilisées actuellement. Elle nous fournit de nombreuses API prêtes à l'emploi et de nombreux outils de développement et d'empaquetage, ce qui peut grandement simplifier notre travail de développement. Cet article explique comment utiliser JQuery pour saisir des requêtes par mots clés.

1. Préparation

Avant d'utiliser la requête de mot-clé d'entrée de JQuery, nous devons introduire le fichier de la bibliothèque JQuery dans le fichier html, qui peut être téléchargé via l'URL suivante :

https://jquery.com/download/

En même temps, nous devons ajouter une zone de saisie et un bouton de requête. Le code est le suivant :

<label for="keyword">请输入关键字：</label>
<input type="text" id="keyword">
<button id="search">查询</button>

2. Utilisez JQuery pour implémenter la requête par mot-clé d'entrée

Tout d'abord, ajoutez une table au fichier html pour afficher la requête. résultats.

<table id="resultTable">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

Ensuite, utilisez l'écouteur d'événements de JQuery dans le fichier JavaScript. Lorsque vous cliquez sur le bouton de requête, récupérez les mots-clés dans la zone de saisie, puis affichez les résultats de la requête dans le tableau via la requête AJAX de JQuery.

$(document).ready(function() {
    $("#search").click(function() {
        var keyword = $.trim($("#keyword").val());
        $.ajax({
            type: "GET",
            url: "search.php",
            data: {
                keyword: keyword
            },
            dataType: "json",
            success: function(data) {
                var tr = "";
                $.each(data, function(index, value) {
                    tr += "<tr>";
                    tr += "<td>" + value.name + "</td>";
                    tr += "<td>" + value.age + "</td>";
                    tr += "<td>" + value.gender + "</td>";
                    tr += "</tr>";
                });
                $("tbody").empty().append(tr);
            }
        });
    });
});

Parmi eux, search.php est le fichier de traitement des données en arrière-plan. Nous devons effectuer une requête de données basée sur les mots-clés saisis en arrière-plan et renvoyer les résultats de la requête.

3. Code complet

Fichier HTML :

<label for="keyword">请输入关键字：</label>
<input type="text" id="keyword">
<button id="search">查询</button>
<table id="resultTable">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

Fichier JavaScript :

$(document).ready(function() {
    $("#search").click(function() {
        var keyword = $.trim($("#keyword").val());
        $.ajax({
            type: "GET",
            url: "search.php",
            data: {
                keyword: keyword
            },
            dataType: "json",
            success: function(data) {
                var tr = "";
                $.each(data, function(index, value) {
                    tr += "<tr>";
                    tr += "<td>" + value.name + "</td>";
                    tr += "<td>" + value.age + "</td>";
                    tr += "<td>" + value.gender + "</td>";
                    tr += "</tr>";
                });
                $("tbody").empty().append(tr);
            }
        });
    });
});

4. Résumé

Ce qui précède est la méthode d'implémentation de la requête de mot-clé d'entrée JQuery. En utilisant les requêtes JQuery et AJAX, nous pouvons facilement compléter la saisie. clé La fonction de requête de mots a considérablement amélioré notre efficacité de développement. Il convient de noter qu'en utilisation réelle, nous devons effectuer certaines opérations de vérification et de filtrage des données en fonction de la situation réelle pour éviter des problèmes de sécurité tels que l'injection SQL.

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!