Bagaimana untuk membaca pangkalan data melalui JQuery-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk membaca pangkalan data melalui JQuery

PHPz

Lepaskan： 2023-04-17 16:09:23

asal

1038 orang telah melayarinya

JQuery ialah perpustakaan JavaScript yang dikenali sebagai cara yang pantas, ringkas dan berkuasa untuk menulis JavaScript. JQuery menyediakan sejumlah besar fungsi dan ciri terbina dalam, yang boleh mengurangkan jumlah kod JavaScript dengan banyak, dan menyediakan operasi DOM yang berkuasa dan permintaan AJAX (JavaScript dan XML Asynchronous) yang ringkas Ia adalah alat penting yang tidak boleh diabaikan dalam Web pembangunan bahagian hadapan.

Dalam aplikasi web, bahagian hadapan melaksanakan operasi yang diperlukan dengan memahami data latar belakang. JQuery boleh mengakses latar belakang melalui permintaan AJAX untuk mendapatkan data yang diperlukan Berikut adalah pengenalan kepada cara membaca pangkalan data melalui JQuery.

Konfigurasikan pustaka JQuery

Perkenalkan pustaka JQuery ke dalam halaman HTML Anda boleh menggunakan CDN (Rangkaian Penghantaran Kandungan) untuk memperkenalkannya, atau anda boleh memuat turunnya simpanan tempatan.

Tambahkan kod berikut pada halaman HTML untuk memperkenalkan perpustakaan JQuery:

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

Salin selepas log masuk

Buat antara muka data latar belakang

Buat antara muka dalam latar belakang supaya Dapatkan data melalui permintaan AJAX dan data dikembalikan dalam format JSON. Mengambil bahasa PHP sebagai contoh, data pangkalan data diperoleh dalam skrip PHP dan diformatkan ke dalam data JSON, dan kemudian dikembalikan kepada permintaan melalui respons HTTP.

<?php
    // 连接数据库操作
    $conn = mysqli_connect("localhost", "my_user", "my_password", "my_db");
    if (!$conn) {
        die("连接失败: " . mysqli_connect_error());
    }
    // 查询数据库操作
    $query = "SELECT * FROM table_name";
    $result = mysqli_query($conn, $query);
    // 数据库数据格式化为 JSON 数据
    $rows = array();
    while($r = mysqli_fetch_assoc($result)) {
        $rows[] = $r;
    }
    echo json_encode($rows);
    // 关闭数据库连接
    mysqli_close($conn);
?>

Salin selepas log masuk

Dapatkan data pangkalan data melalui permintaan AJAX

Dalam halaman HTML, buat kawasan untuk memaparkan data (seperti elemen div), dan kemudian gunakan AJAX Minta antara muka data latar belakang untuk mendapatkan data. Dalam permintaan, JQuery akan menambah maklumat pengepala secara automatik dan mendapatkan data secara tidak segerak.

<!doctype html>
 <html>
 <head>
     <title>读取数据库</title>
 </head>
 <body>
     <div id="result"></div>
     <script type="text/javascript">
         $(document).ready(function() {
             $.ajax({
                 url: 'backend.php', // 数据库接口地址
                 type: 'GET',        // HTTP请求方式
                 dataType: 'json',   // 返回数据类型
                 success: function(data) { // 成功回调函数
                     $.each(data, function(index, element) {
                         $('#result').append('<p>' + element.name + '</p>');
                     });
                 },
                 error: function(xhr, textStatus, errorThrown) { // 失败回调函数
                     console.log(xhr.status);
                 }
            });
        });
     </script>
 </body>
 </html>

Salin selepas log masuk

Seperti yang ditunjukkan dalam kod di atas, kami mentakrifkan elemen div dengan ID hasil untuk memaparkan data yang diperoleh. Gunakan halaman backend.php yang diakses dengan permintaan AJAX untuk meminta data daripada pelayan. Jika permintaan berjaya, JQuery akan menghuraikan data JSON yang dikembalikan secara automatik dan melaksanakan fungsi panggil balik untuk memaparkan data pada halaman. Jika permintaan gagal, fungsi panggil balik kegagalan dilaksanakan.

Ringkasnya, melalui langkah mudah di atas, anda boleh menggunakan perpustakaan JQuery untuk membaca pangkalan data dalam pembangunan web, dengan itu mencapai aplikasi web yang lebih berkuasa dan fleksibel.

Atas ialah kandungan terperinci Bagaimana untuk membaca pangkalan data melalui JQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!