So implementieren Sie die Abfragefunktion für Eingabeschlüsselwörter in jquery

JQuery ist derzeit eine der am weitesten verbreiteten JavaScript-Bibliotheken. Sie stellt uns viele vorgefertigte APIs und viele Entwicklungs- und Paketierungstools zur Verfügung, die unsere Entwicklungsarbeit erheblich vereinfachen können. In diesem Artikel wird erläutert, wie Sie mit JQuery Schlüsselwortabfragen eingeben.

1. Vorbereitung

Bevor wir die Eingabeschlüsselwortabfrage von JQuery verwenden, müssen wir die JQuery-Bibliotheksdatei in die HTML-Datei einfügen, die über die folgende URL heruntergeladen werden kann:

https://jquery.com/download/

Gleichzeitig müssen wir ein Eingabefeld und eine Abfrageschaltfläche hinzufügen. Der Code lautet wie folgt:

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

2. Verwenden Sie JQuery, um die Eingabeschlüsselwortabfrage zu implementieren.

Fügen Sie zunächst eine Tabelle zur HTML-Datei hinzu, um die Abfrage anzuzeigen Ergebnisse.

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

Als nächstes verwenden Sie den Ereignis-Listener von JQuery in der JavaScript-Datei. Wenn Sie auf die Abfrageschaltfläche klicken, rufen Sie die Schlüsselwörter im Eingabefeld ab und zeigen Sie dann die Abfrageergebnisse in der Tabelle über die AJAX-Anfrage an.

$(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);
            }
        });
    });
});

Unter anderem ist search.php die Datei für die Hintergrundverarbeitung von Daten. Wir müssen eine Datenabfrage basierend auf den eingegebenen Schlüsselwörtern im Hintergrund durchführen und die Abfrageergebnisse zurückgeben.

3. Vollständiger Code

HTML-Datei:

<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>

4. Zusammenfassung

Das Obige ist die Implementierungsmethode der JQuery-Eingabeschlüsselwortabfrage, wir können die Eingabe einfach vervollständigen Schlüssel Die Wortabfragefunktion hat unsere Entwicklungseffizienz erheblich verbessert. Es ist erwähnenswert, dass wir bei der tatsächlichen Verwendung einige Datenüberprüfungs- und Filtervorgänge basierend auf der tatsächlichen Situation durchführen müssen, um Sicherheitsprobleme wie SQL-Injection zu verhindern.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Abfragefunktion für Eingabeschlüsselwörter in jquery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!