做一个中华传统且具有实用性的网页
时间: 2023-07-28 16:07:09 浏览: 89
中国传统文化主题的网页页面设计
好的,以下是一个中华传统且具有实用性的网页——《中医穴位查询器》。
HTML代码如下:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>中医穴位查询器</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
}
input[type=text] {
padding: 10px;
font-size: 16px;
border-radius: 5px;
border: none;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
width: 80%;
margin: 20px auto;
}
button {
padding: 10px 20px;
font-size: 16px;
background-color: #008CBA;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #005E7A;
}
.result {
width: 80%;
margin: 20px auto;
padding: 10px;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
border-radius: 5px;
}
.result h2 {
margin-top: 0;
}
.result p {
margin: 10px 0;
}
</style>
</head>
<body>
<h1>中医穴位查询器</h1>
<input type="text" id="acupoint" placeholder="请输入穴位名称">
<button onclick="search()">查询</button>
<div id="result" class="result"></div>
<script>
function search() {
var acupoint = document.getElementById("acupoint").value;
var resultDiv = document.getElementById("result");
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var result = JSON.parse(xhr.responseText);
var html = "<h2>" + result.name + "</h2>";
html += "<p>所在部位:" + result.location + "</p>";
html += "<p>功效作用:" + result.effect + "</p>";
resultDiv.innerHTML = html;
}
};
xhr.open("GET", "acupoint.php?q=" + acupoint, true);
xhr.send();
}
</script>
</body>
</html>
```
在这个网页中,用户可以输入中医穴位的名称,点击查询按钮后,会通过Ajax技术向服务器发送请求,服务器返回对应穴位的信息,并在页面上显示出来。
服务器端代码(acupoint.php)如下:
```php
<?php
$q = $_GET["q"];
$con = mysqli_connect("localhost", "root", "password", "acupoint");
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con, "acupoint");
$sql = "SELECT * FROM acupoint WHERE name = '" . $q . "'";
$result = mysqli_query($con, $sql);
if ($result->num_rows > 0) {
$row = $result->fetch_assoc();
$data = array(
"name" => $row["name"],
"location" => $row["location"],
"effect" => $row["effect"]
);
echo json_encode($data);
} else {
echo "没有找到该穴位信息";
}
mysqli_close($con);
?>
```
在这个PHP文件中,首先获取前端发送过来的请求参数$q,然后连接数据库,根据$q查询对应的穴位信息,将结果封装成JSON格式返回给前端。如果没有查询到结果,则返回“没有找到该穴位信息”。
这个网页可以帮助用户快速查询中医穴位的相关信息,具有实用性和中华传统特色。
阅读全文