JQuery経由でデータベースを読み取る方法-フロントエンドQ&A-php.cn

JQuery経由でデータベースを読み取る方法

PHPz

リリース： 2023-04-17 16:09:23

オリジナル

1111 人が閲覧しました

JQuery は、JavaScript を記述するための高速、簡潔、かつ強力な方法として知られる JavaScript ライブラリです。 JQuery は、JavaScript コードの量を大幅に削減できる多数の組み込み関数と機能を提供し、強力な DOM 操作と簡潔な AJAX (非同期 JavaScript および XML) リクエストを提供する、Web において無視できない重要なツールです。フロントエンド開発。

Web アプリケーションでは、フロントエンドがバックグラウンドデータを理解して必要な操作を実行します。 JQuery は、AJAX リクエストを通じてバックグラウンドにアクセスして必要なデータを取得できます。ここでは、JQuery を通じてデータベースを読み取る方法を紹介します。

JQuery ライブラリの構成

JQuery ライブラリを HTML ページに導入します。CDN (コンテンツ配信ネットワーク) を使用して導入することも、次の場所にダウンロードすることもできます。ローカルストレージ。

次のコードを HTML ページに追加して、JQuery ライブラリを導入します。

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

ログイン後にコピー

バックグラウンドデータインターフェイスを作成する

バックグラウンドでインターフェイスを作成するAJAX リクエストを使用してデータを取得する場合、データは JSON 形式で返されます。 PHP 言語を例に挙げると、データベースデータは PHP スクリプトで取得され、JSON データにフォーマットされて、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);
?>

ログイン後にコピー

AJAX リクエストによるデータベースデータの取得

HTML ページにデータを表示する領域 (div 要素など) を作成し、AJAX を使用してリクエストを実行します。データを取得するためのバックグラウンドデータインターフェイス。リクエストには、JQuery が自動的にヘッダー情報を追加し、非同期でデータを取得します。

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

ログイン後にコピー

上記のコードのように、取得したデータを表示するためにresultのIDを持つdiv要素を定義しました。 AJAX リクエストでアクセスされる backend.php ページを使用して、サーバーからのデータをリクエストします。リクエストが成功すると、JQuery は返された JSON データを自動的に解析し、コールバック関数を実行してページにデータを表示します。リクエストが失敗した場合は、失敗コールバック関数が実行されます。

つまり、上記の簡単な手順により、JQuery ライブラリを使用して Web 開発でデータベースを読み取ることができ、それにより、より強力で柔軟な Web アプリケーションを実現できます。

以上がJQuery経由でデータベースを読み取る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。