Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Bagaimana untuk melaksanakan fungsi pertanyaan kata kunci input dalam jquery

Bagaimana untuk melaksanakan fungsi pertanyaan kata kunci input dalam jquery

PHPz
Lepaskan: 2023-04-07 14:03:19
asal
835 orang telah melayarinya

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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);
            }
        });
    });
});
Salin selepas log masuk
Salin selepas log masuk

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>
Salin selepas log masuk

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);
            }
        });
    });
});
Salin selepas log masuk
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan