Bagaimana untuk melaksanakan javascript untuk memasukkan nilai dalam teks dan menanyakan pangkalan data berdasarkan nilai

Dengan pembangunan aplikasi web, JavaScript telah menjadi salah satu bahasa sebelah pelanggan yang paling popular. JavaScript boleh melaksanakan pelbagai fungsi, termasuk halaman web dinamik, pengesahan borang, antara muka pengguna interaktif, kesan animasi dan banyak lagi. Dalam artikel ini, kami akan memperkenalkan cara menggunakan JavaScript untuk menanya pangkalan data secara automatik selepas memasukkan nilai dalam kotak teks.

1. Tentukan data pertanyaan

Sebelum menggunakan JavaScript untuk menanyakan pangkalan data, anda perlu menentukan data yang ingin anda tanyakan. Dengan menggunakan pertanyaan pangkalan data anda boleh mendapatkan set data yang diperlukan. Dalam contoh ini, kami akan mensimulasikan pangkalan data sistem pengurusan pelajar yang mengandungi maklumat tentang semua pelajar, seperti nama, gred dan sebagainya. Kami akan menggunakan JavaScript untuk menanya secara automatik pangkalan data untuk memaparkan maklumat gred pelajar apabila pengguna memasukkan nama pelajar dalam kotak input.

2. Mewujudkan sambungan pangkalan data

Untuk membuat pertanyaan pangkalan data, anda perlu menyambung ke pangkalan data. Dengan menggunakan teknologi AJAX, anda boleh menghantar permintaan ke pelayan dan mendapatkan respons tanpa memuat semula halaman. Dalam contoh ini, kami akan menggunakan objek XMLHttpRequest untuk melaksanakan permintaan AJAX. Berikut ialah contoh mewujudkan sambungan pangkalan data:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        // 处理响应数据
    }
};
xmlhttp.open("GET", "getstudentinfo.php?q=" + str, true);
xmlhttp.send();

Dalam kod di atas, kami mencipta permintaan AJAX baharu menggunakan objek XMLHttpRequest. Apabila readyState berubah, kami memanggil fungsi panggil balik untuk memproses data respons. Antaranya, atribut readyState mewakili status permintaan AJAX, dan atribut status mewakili kod status respons. Dengan memanggil kaedah open(), kami boleh menentukan URL yang diminta, serta jenis permintaan ("GET" atau "POST"). Selepas memanggil kaedah send(), permintaan AJAX akan dihantar ke pelayan.

3. Dengar peristiwa kotak input

Apabila pengguna memasukkan aksara dalam kotak input, kami perlu menanyakan pangkalan data dalam masa nyata untuk mendapatkan hasil yang sepadan. Untuk mendengar peristiwa kotak input, kita boleh menggunakan kaedah addEventListener() untuk mengaitkan pengendali acara dengan kotak input. Berikut ialah contoh mendengar peristiwa kotak input:

document.getElementById("input").addEventListener("keyup", function() {
    var input_value = document.getElementById("input").value;
    // 查询数据库
});

Dalam kod di atas, kami mendaftarkan pengendali acara "keyup" melalui kaedah addEventListener(), apabila pengguna memasukkan aksara dalam kotak input , acara akan dicetuskan. Kami mendapatkan elemen kotak input melalui kaedah document.getElementById() dan kemudian gunakan atribut nilai untuk mendapatkan nilai kotak input.

4. Soal pangkalan data dan paparkan hasilnya

Apabila pengguna memasukkan aksara dalam kotak input, kami perlu menghantar permintaan AJAX kepada pelayan untuk mendapatkan data yang sepadan . Berikut ialah contoh pertanyaan pangkalan data dan memaparkan keputusan:

document.getElementById("input").addEventListener("keyup", function() {
    var input_value = document.getElementById("input").value;
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("result").innerHTML = this.responseText;
        }
    };
    xmlhttp.open("GET", "getstudentinfo.php?q=" + input_value, true);
    xmlhttp.send();
});

Dalam kod di atas, kami menghantar permintaan AJAX dengan nilai input ke pelayan dan pelayan akan mengembalikan serpihan HTML yang mengandungi maklumat pelajar tersebut. Apabila readyState berubah, kami menyimpan data respons dalam elemen hasil, yang akan digunakan untuk memaparkan maklumat pelajar.

5. Mencapai penyiapan automatik

Selain menanyakan pangkalan data secara automatik apabila memasukkan nilai dalam kotak input, kami juga boleh melaksanakan fungsi penyiapan automatik. Apabila pengguna memasukkan aksara dalam kotak input, kami boleh memaparkan menu lungsur dengan pilihan yang tersedia. Berikut ialah contoh pelaksanaan autolengkap:

document.getElementById("input").addEventListener("keyup", function() {
    var input_value = document.getElementById("input").value;
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var options = JSON.parse(this.responseText);
            var ul = document.getElementById("auto-complete");
            ul.innerHTML = "";
            for (var i = 0; i < options.length; i++) {
                var li = document.createElement("li");
                var a = document.createElement("a");
                a.appendChild(document.createTextNode(options[i]));
                a.setAttribute("href", "#");
                li.appendChild(a);
                ul.appendChild(li);
            }
            if (options.length > 0) {
                ul.style.display = "block";
            } else {
                ul.style.display = "none";
            }
        }
    };
    xmlhttp.open("GET", "getstudentnames.php?q=" + input_value, true);
    xmlhttp.send();
});

Dalam kod di atas, kami menghantar permintaan AJAX dengan nilai input ke pelayan dan pelayan akan mengembalikan tatasusunan JSON dengan pilihan yang tersedia. Kami menggunakan kaedah JSON.parse() untuk menukar data respons kepada objek JavaScript. Kami kemudian membuat senarai tidak tertib dengan pilihan dan menambahnya pada elemen autolengkap. Jika bilangan pilihan lebih besar daripada 0, menu lungsur turun dipaparkan.

6. Kesimpulan

Artikel ini memperkenalkan cara menggunakan JavaScript untuk menanya pangkalan data secara automatik selepas memasukkan nilai dalam kotak teks. Dengan menggunakan teknologi AJAX dan pendengar acara, kami boleh mencapai cara yang berkuasa dan fleksibel untuk berinteraksi dengan antara muka pengguna. Jika anda ingin mengetahui lebih lanjut tentang teknologi JavaScript dan AJAX, lihat literatur dan tutorial.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan javascript untuk memasukkan nilai dalam teks dan menanyakan pangkalan data berdasarkan nilai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!