ホームページ > 記事 > ウェブフロントエンド > JQuery経由でデータベースを読み取る方法
JQuery経由でデータベースを読み取る方法
- PHPzオリジナル
- 2023-04-17 15:15:441014ブラウズ
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 サイトの他の関連記事を参照してください。