用php或JavaScript,做类似爱奇艺的电影筛选板块,多层多标签实时筛选对应的项目,请帮我编写简单的模板
时间: 2024-03-31 19:36:01 浏览: 23
好的,我可以为你提供一个简单的模板来实现这个功能。请参考以下代码:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>电影筛选器</title>
<meta charset="utf-8">
<style>
/* 样式设置 */
</style>
</head>
<body>
<h1>电影筛选器</h1>
<div>
<label>类型:</label>
<select id="type-filter">
<option value="">全部</option>
<option value="Action">动作</option>
<option value="Comedy">喜剧</option>
<option value="Drama">剧情</option>
</select>
</div>
<div>
<label>演员:</label>
<input type="checkbox" name="actor-filter" value="Tom Cruise">汤姆·克鲁斯</option>
<input type="checkbox" name="actor-filter" value="Brad Pitt">布拉德·皮特</option>
<input type="checkbox" name="actor-filter" value="Leonardo DiCaprio">莱昂纳多·迪卡普里奥</option>
</div>
<div>
<label>导演:</label>
<input type="checkbox" name="director-filter" value="Christopher Nolan">克里斯托弗·诺兰</option>
<input type="checkbox" name="director-filter" value="Steven Spielberg">史蒂文·斯皮尔伯格</option>
<input type="checkbox" name="director-filter" value="Quentin Tarantino">昆汀·塔伦蒂诺</option>
</div>
<button id="filter-button">筛选</button>
<div id="movie-list">
<!-- 电影列表 -->
</div>
<script src="script.js"></script>
</body>
</html>
```
JavaScript 代码(保存为 script.js 文件):
```javascript
// 获取筛选器元素
var typeFilter = document.getElementById("type-filter");
var actorFilter = document.getElementsByName("actor-filter");
var directorFilter = document.getElementsByName("director-filter");
// 获取筛选按钮
var filterButton = document.getElementById("filter-button");
// 获取电影列表元素
var movieList = document.getElementById("movie-list");
// 筛选按钮点击事件
filterButton.addEventListener("click", function() {
// 获取选中的筛选条件
var type = typeFilter.value;
var actors = [];
for (var i = 0; i < actorFilter.length; i++) {
if (actorFilter[i].checked) {
actors.push(actorFilter[i].value);
}
}
var directors = [];
for (var i = 0; i < directorFilter.length; i++) {
if (directorFilter[i].checked) {
directors.push(directorFilter[i].value);
}
}
// 发送请求并更新电影列表
updateMovieList(type, actors, directors);
});
// 更新电影列表函数
function updateMovieList(type, actors, directors) {
// 发送 AJAX 请求
var xhr = new XMLHttpRequest();
xhr.open("POST", "filter.php", true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 更新电影列表
movieList.innerHTML = xhr.responseText;
}
};
var data = "type=" + type + "&actors=" + actors.join(",") + "&directors=" + directors.join(",");
xhr.send(data);
}
```
PHP 代码(保存为 filter.php 文件):
```php
<?php
// 连接数据库
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
$conn = new mysqli($servername, $username, $password, $dbname);
// 获取筛选条件
$type = $_POST["type"];
$actors = explode(",", $_POST["actors"]);
$directors = explode(",", $_POST["directors"]);
// 构建 SQL 语句
$sql = "SELECT * FROM movies WHERE 1";
if ($type != "") {
$sql .= " AND type = '" . $type . "'";
}
if (count($actors) > 0) {
$sql .= " AND (";
for ($i = 0; $i < count($actors); $i++) {
$sql .= "actor LIKE '%" . $actors[$i] . "%'";
if ($i != count($actors) - 1) {
$sql .= " OR ";
}
}
$sql .= ")";
}
if (count($directors) > 0) {
$sql .= " AND (";
for ($i = 0; $i < count($directors); $i++) {
$sql .= "director LIKE '%" . $directors[$i] . "%'";
if ($i != count($directors) - 1) {
$sql .= " OR ";
}
}
$sql .= ")";
}
// 执行查询
$result = $conn->query($sql);
// 构建电影列表
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
echo "<div>";
echo "<h2>" . $row["title"] . "</h2>";
echo "<p>类型:" . $row["type"] . "</p>";
echo "<p>演员:" . $row["actor"] . "</p>";
echo "<p>导演:" . $row["director"] . "</p>";
echo "</div>";
}
} else {
echo "没有符合条件的电影。";
}
// 关闭连接
$conn->close();
?>
```
请注意,这只是一个简单的模板,需要根据你的实际需求进行修改和优化。如果你遇到任何问题,请随时联系我。