Synergy between HTML and database queries

王林
Release: 2024-04-09 14:21:01
Original
1064 people have browsed it

HTML complements database queries, enabling the construction of interactive and data-driven web applications: HTML form processing: collects user input and retrieves data from the database, responding to user actions. AJAX data request: Send database query asynchronously, update data without refreshing the page. Database-driven search functionality: The user enters a query and the application uses SQL to query the database to return relevant results.

Synergy between HTML and database queries

The synergy of HTML and database queries

Introduction

HTML and databases Queries complement each other and help us build interactive and data-driven web applications. This article explores how to combine HTML with database queries and provides some practical examples.

1. HTML form processing

HTML forms can be used to collect user input. We can use backend languages ​​like PHP, Python or Node.js to process these forms and retrieve the required data from the database in response.

Code Example:

<!-- 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>";
}
?>
Copy after login

2. AJAX Data Request

AJAX (Asynchronous JavaScript and XML) can be used to request data to the database Send a query without refreshing the entire page. This allows us to update data without disrupting the user experience.

Code example:

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

3. Database-driven search function

We can combine HTML and database queries to build a database Driver search function. The user enters a query and the application uses SQL to query the database and return relevant results.

Code Example:

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

Conclusion

HTML works with database queries to provide the ability to build interactive and data-driven Powerful tools for web applications. By integrating these technologies, we can create dynamic and interactive pages that can fetch, process and display data from the database.

The above is the detailed content of Synergy between HTML and database queries. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template