Synergie zwischen HTML und Datenbankabfragen

HTML ergänzt Datenbankabfragen und ermöglicht die Erstellung interaktiver und datengesteuerter Webanwendungen: HTML-Formularverarbeitung: sammelt Benutzereingaben und ruft Daten aus der Datenbank ab und reagiert auf Benutzervorgänge. AJAX-Datenanforderung: Datenbankabfrage asynchron senden, Daten aktualisieren, ohne die Seite zu aktualisieren. Datenbankgesteuerte Suchfunktion: Der Benutzer gibt eine Abfrage ein und die Anwendung fragt die Datenbank mithilfe von SQL ab, um relevante Ergebnisse zurückzugeben.

Die Synergie von HTML und Datenbankabfragen

Einführung

HTML und Datenbankabfragen ergänzen sich gegenseitig und helfen uns beim Aufbau interaktiver und datengesteuerter Webanwendungen. In diesem Artikel wird untersucht, wie HTML mit Datenbankabfragen kombiniert wird, und es werden einige praktische Beispiele bereitgestellt.

1. HTML-Formularverarbeitung

HTML-Formulare können zum Sammeln von Benutzereingaben verwendet werden. Wir können Backend-Sprachen wie PHP, Python oder Node.js verwenden, um diese Formulare zu verarbeiten und als Antwort die erforderlichen Daten aus der Datenbank abzurufen.

Codebeispiel:

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

AJAX (Asynchrones JavaScript und XML) kann verwendet werden, um Abfragen an die Datenbank zu senden, ohne die gesamte Seite zu aktualisieren. Dadurch können wir Daten aktualisieren, ohne das Benutzererlebnis zu beeinträchtigen.

Codebeispiel:

<!-- 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. Datenbankgesteuerte Suchfunktion

Wir können eine datenbankgesteuerte Suchfunktion erstellen, indem wir HTML- und Datenbankabfragen kombinieren. Der Benutzer gibt eine Abfrage ein und die Anwendung verwendet SQL, um die Datenbank abzufragen und relevante Ergebnisse zurückzugeben.

Codebeispiel:

<!-- 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]);
?>

Fazit

HTML arbeitet mit Datenbankabfragen, um leistungsstarke Tools zum Erstellen interaktiver und datengesteuerter Webanwendungen bereitzustellen. Durch die Integration dieser Technologien können wir dynamische und interaktive Seiten erstellen, die Daten aus der Datenbank abrufen, verarbeiten und anzeigen können.

Das obige ist der detaillierte Inhalt vonSynergie zwischen HTML und Datenbankabfragen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!