商品分类点击切换分类html
时间: 2023-07-18 10:34:18 浏览: 60
好的,我可以为您提供一个简单的商品分类点击切换分类的HTML页面示例。
我们可以创建一个包含商品分类的列表,例如:
```python
categories = ["Electronics", "Clothing", "Books"]
```
然后,我们可以在HTML页面中创建一个包含分类名称的列表,并使用JavaScript为每个分类名称添加一个点击事件处理程序。当用户点击分类名称时,我们可以将该分类名称发送到后端,并显示响应数据。
以下是一个简单的HTML页面示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Product Search</title>
</head>
<body>
<h1>Product Search</h1>
<ul id="categoryList">
<li><a href="#" onclick="searchByCategory('Electronics')">Electronics</a></li>
<li><a href="#" onclick="searchByCategory('Clothing')">Clothing</a></li>
<li><a href="#" onclick="searchByCategory('Books')">Books</a></li>
</ul>
<div id="searchResults"></div>
<script>
function searchByCategory(category) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "search?category=" + category, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var results = JSON.parse(xhr.responseText);
displayResults(results);
}
};
xhr.send();
}
function displayResults(results) {
var container = document.getElementById("searchResults");
container.innerHTML = "";
if (results.length === 0) {
container.innerHTML = "<p>No results found.</p>";
} else {
for (var i = 0; i < results.length; i++) {
var product = results[i];
var div = document.createElement("div");
div.innerHTML = "<h3>" + product.name + "</h3><p>" + product.description + "</p><p>Price: " + product.price + "</p>";
container.appendChild(div);
}
}
}
</script>
</body>
</html>
```
在这个页面中,我们创建了一个包含分类名称的列表,并为每个分类名称添加了一个点击事件处理程序`searchByCategory()`。该函数会发送一个GET请求到后端,包含分类名称,然后在响应成功后显示查询结果。
在后端,我们可以使用Python的Flask框架来处理这个GET请求,并返回包含查询结果的JSON响应。以下是一个简单的Flask应用程序示例:
```python
from flask import Flask, request, jsonify
app = Flask(__name__)
with open("products.json", "r") as f:
products = json.load(f)
@app.route("/search")
def search():
category = request.args.get("category")
results = []
for product in products:
if product["category"] == category:
results.append(product)
return jsonify(results)
if __name__ == "__main__":
app.run()
```
在这个应用程序中,我们首先使用Flask加载JSON文件中的产品数据。然后,我们创建一个路由`/search`,当收到GET请求时,会根据分类名称过滤产品数据,并返回包含查询结果的JSON响应。
这就是一个简单的方案,可以在HTML页面中实现商品分类点击切换分类。