Bagaimana untuk melaksanakan fungsi pertanyaan kata kunci input dalam jquery

JQuery ialah salah satu perpustakaan JavaScript yang paling banyak digunakan pada masa ini. Ia menyediakan kami dengan banyak API siap pakai dan banyak alat pembangunan dan pembungkusan, yang boleh memudahkan kerja pembangunan kami. Artikel ini akan memperkenalkan cara menggunakan JQuery untuk memasukkan pertanyaan kata kunci.

1. Persediaan

Sebelum menggunakan pertanyaan kata kunci input JQuery, kami perlu memperkenalkan fail perpustakaan JQuery ke dalam fail html, yang boleh dimuat turun melalui URL berikut:

https://jquery.com/download/

Pada masa yang sama, kita perlu menambah kotak input dan butang pertanyaan, kodnya adalah seperti berikut:

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

2. Gunakan JQuery untuk melaksanakan pertanyaan kata kunci input

Mula-mula, tambahkan jadual pada fail html untuk memaparkan hasil pertanyaan.

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

Seterusnya, gunakan pendengar acara JQuery dalam fail JavaScript Apabila butang pertanyaan diklik, dapatkan kata kunci dalam kotak input, dan kemudian paparkan hasil pertanyaan dalam jadual melalui permintaan AJAX 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);
            }
        });
    });
});

Antaranya, search.php ialah fail untuk pemprosesan data latar belakang Kami perlu melakukan pertanyaan data berdasarkan kata kunci yang dimasukkan di latar belakang dan mengembalikan hasil pertanyaan.

3. Kod lengkap

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

Fail 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 Ia adalah kaedah pelaksanaan pertanyaan kata kunci input JQuery Dengan menggunakan permintaan JQuery dan AJAX, kami boleh melengkapkan fungsi pertanyaan kata kunci input dengan mudah, yang meningkatkan kecekapan pembangunan kami dengan banyak. Perlu diingat bahawa dalam penggunaan sebenar, kami perlu melakukan beberapa operasi pengesahan dan penapisan data berdasarkan situasi sebenar untuk mengelakkan isu keselamatan seperti suntikan SQL.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi pertanyaan kata kunci input dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!