jqueryで入力キーワードクエリ関数を実装する方法-フロントエンドQ&A-php.cn

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

PHPz

リリース： 2023-04-07 14:03:19

オリジナル

755 人が閲覧しました

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 サイトの他の関連記事を参照してください。