Synergie entre requêtes HTML et bases de données

HTML complète les requêtes de base de données, permettant la construction d'applications Web interactives et basées sur les données : Traitement de formulaires HTML : collecte les entrées de l'utilisateur et récupère les données de la base de données, en réponse aux opérations de l'utilisateur. Demande de données AJAX : envoyez une requête de base de données de manière asynchrone, mettez à jour les données sans actualiser la page. Fonctionnalité de recherche basée sur la base de données : l'utilisateur saisit une requête et l'application utilise SQL pour interroger la base de données afin de renvoyer des résultats pertinents.

La synergie du HTML et des requêtes de base de données

Introduction

Les requêtes HTML et de base de données se complètent et nous aident à créer des applications Web interactives et basées sur les données. Cet article explique comment combiner HTML avec des requêtes de base de données et fournit quelques exemples pratiques.

1. Traitement des formulaires HTML

Les formulaires HTML peuvent être utilisés pour collecter les entrées des utilisateurs. Nous pouvons utiliser des langages backend comme PHP, Python ou Node.js pour traiter ces formulaires et récupérer les données requises de la base de données en réponse.

Exemple de code :

<!-- 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. Demande de données AJAX

AJAX (JavaScript asynchrone et XML) peut être utilisé pour envoyer des requêtes à la base de données sans actualiser la page entière. Cela nous permet de mettre à jour les données sans perturber l'expérience utilisateur.

Exemple de code :

<!-- 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. Fonction de recherche basée sur la base de données

Nous pouvons créer une fonction de recherche basée sur la base de données en combinant des requêtes HTML et des requêtes de base de données. L'utilisateur saisit une requête et l'application utilise SQL pour interroger la base de données et renvoyer des résultats pertinents.

Exemple de code :

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

Conclusion

HTML fonctionne avec les requêtes de base de données pour fournir des outils puissants pour créer des applications Web interactives et basées sur les données. En intégrant ces technologies, nous pouvons créer des pages dynamiques et interactives capables de récupérer, traiter et afficher les données de la base de données.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!