jqueryで入力キーワードクエリ関数を実装する方法

JQuery は、現在最も広く使用されている JavaScript ライブラリの 1 つであり、開発作業を大幅に簡素化できる、既製の API と多くの開発およびパッケージ化ツールを提供します。この記事では、JQueryを使ってキーワードクエリを入力する方法を紹介します。

1. 準備

JQuery の入力キーワード クエリを使用する前に、次の URL からダウンロードできる JQuery ライブラリ ファイルを HTML ファイルに導入する必要があります。 https://jquery.com/download/

同時に、入力ボックスとクエリ ボタンを追加する必要があり、コードは次のとおりです:

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

2. JQuery を使用します。入力キーワード クエリを実装するには

まず、クエリ結果を表示するテーブルを HTML ファイルに追加します。

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

次に、JavaScript ファイルで JQuery のイベント リスナーを使用します。クエリ ボタンをクリックすると、入力ボックスでキーワードを取得し、JQuery の AJAX リクエストを通じてテーブルにクエリ結果を表示します。

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

このうち、search.php はデータをバックグラウンド処理するためのファイルで、入力されたキーワードに基づいてバックグラウンドでデータ クエリを実行し、クエリ結果を返す必要があります。

3. 完全なコード

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>

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. 概要

上記は JQuery です。入力キー ワードクエリの実装方法は、JQuery と AJAX リクエストを使用することで、入力キーワードクエリ機能を簡単に完成させることができ、開発効率が大幅に向上します。実際の使用では、SQL インジェクションなどのセキュリティ問題を防ぐために、実際の状況に基づいてデータの検証とフィルタリング操作を実行する必要があることに注意してください。

以上がjqueryで入力キーワードクエリ関数を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。