HTML とデータベース クエリ間の相乗効果

HTML はデータベース クエリを補完し、対話型でデータ駆動型の Web アプリケーションの構築を可能にします。 HTML フォーム処理: ユーザー入力を収集し、データベースからデータを取得し、ユーザー アクションに応答します。 AJAX データ リクエスト: データベース クエリを非同期に送信し、ページを更新せずにデータを更新します。データベース主導の検索機能: ユーザーがクエリを入力すると、アプリケーションは SQL を使用してデータベースにクエリを実行し、関連する結果を返します。

HTML とデータベース クエリの相乗効果

はじめに

HTML とデータベースクエリは相互に補完し、インタラクティブでデータ駆動型の Web アプリケーションを構築するのに役立ちます。この記事では、HTML とデータベース クエリを組み合わせる方法を検討し、いくつかの実践的な例を示します。

1. HTML フォーム処理

HTML フォームを使用してユーザー入力を収集できます。 PHP、Python、Node.js などのバックエンド言語を使用してこれらのフォームを処理し、それに応じてデータベースから必要なデータを取得できます。

コード例:

<!-- HTML 表单 -->
<form action="process.php" method="post">
  <input type="text" name="name" placeholder="姓名">
  <input type="email" name="email" placeholder="电子邮箱">
  <input type="submit" value="提交">
</form>

<!-- PHP 表单处理 -->
<?php
// 从表单中获取数据
$name = $_POST['name'];
$email = $_POST['email'];

// 连接数据库
$conn = new mysqli('localhost', 'root', '', 'mydb');

// 准备 SQL 查询
$stmt = $conn->prepare("SELECT * FROM users WHERE name=?");
$stmt->bind_param('s', $name);

// 执行查询并获取结果
$stmt->execute();
$result = $stmt->get_result();

// 遍历结果并显示用户数据
while ($row = $result->fetch_assoc()) {
  echo "姓名：" . $row['name'] . "<br>";
  echo "电子邮箱：" . $row['email'] . "<br>";
}
?>

2. AJAX データ リクエスト

AJAX (非同期 JavaScript および XML) は、次の目的で使用できます。データベースへのデータの要求 ページ全体を更新せずにクエリを送信します。これにより、ユーザー エクスペリエンスを中断することなくデータを更新できるようになります。

コード例:

<!-- HTML 页面 -->
<div id="data"></div>

<!-- JavaScript AJAX 调用 -->
<script>
// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 设置请求方法和 URL
xhr.open('GET', 'get_data.php');

// 发送请求
xhr.send();

// 处理响应
xhr.onload = function() {
  if (xhr.status == 200) {
    var data = JSON.parse(xhr.responseText);
    // 使用接收到的数据更新 HTML 元素
    document.getElementById('data').innerHTML = data.message;
  }
};
</script>

<!-- PHP 获取数据 -->
<?php
// 连接数据库
$conn = new mysqli('localhost', 'root', '', 'mydb');

// 准备 SQL 查询
$stmt = $conn->prepare("SELECT * FROM messages");

// 执行查询并获取结果
$stmt->execute();
$result = $stmt->get_result();

// 将结果编码为 JSON 并返回
$messages = [];
while ($row = $result->fetch_assoc()) {
  $messages[] = $row;
}
echo json_encode(['message' => $messages]);
?>

3. データベース駆動型検索機能

HTML とデータベース クエリを組み合わせて構築できます。データベースドライバー検索機能。ユーザーがクエリを入力すると、アプリケーションは SQL を使用してデータベースにクエリを実行し、関連する結果を返します。

コード例:

<!-- HTML 搜索栏 -->
<input type="text" id="search">

<!-- JavaScript 搜索处理 -->
<script>
// 获取搜索栏输入
var searchTerm = document.getElementById('search').value;

// 使用 AJAX 发送查询
var xhr = new XMLHttpRequest();
xhr.open('GET', 'search.php?q=' + searchTerm);
xhr.send();

// 处理响应
xhr.onload = function() {
  if (xhr.status == 200) {
    var results = JSON.parse(xhr.responseText);
    // 使用接收到的结果更新 HTML 元素
    // ...
  }
};
</script>

<!-- PHP 搜索 -->
<?php
// 获取搜索查询
$q = $_GET['q'];

// 连接数据库
$conn = new mysqli('localhost', 'root', '', 'mydb');

// 准备 SQL 查询
$stmt = $conn->prepare("SELECT * FROM products WHERE name LIKE ?");
$stmt->bind_param('s', $q);

// 执行查询并获取结果
$stmt->execute();
$result = $stmt->get_result();

// 将结果编码为 JSON 并返回
$products = [];
while ($row = $result->fetch_assoc()) {
  $products[] = $row;
}
echo json_encode(['results' => $products]);
?>

結論

HTML はデータベース クエリと連携して、インタラクティブなデータを構築する機能を提供します。 Web アプリケーション用の強力なツールを駆動します。これらのテクノロジーを統合することで、データベースからデータを取得、処理、表示できる動的でインタラクティブなページを作成できます。

以上がHTML とデータベース クエリ間の相乗効果の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。