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 サイトの他の関連記事を参照してください。