• 日期: 2026-01-29
  • 标签: 常规

使用 PHP+jQuery+CSS3 实现网址收藏夹功能

本示例将使用 PHP、jQuery 和 CSS3 创建一个功能丰富的网址收藏夹，包括添加、删除、锁定、密码解锁、搜索等功能。我们将使用 txt 文件存储收藏的网址信息。

1. HTML 页面结构

HTML 页面主要包含一个表格，以及添加、删除、锁定、密码解锁，搜索等功能的按钮和输入框。表格的列包括网址名、URL、状态等信息。按钮和输入框可以使用 HTML 的表单元素实现。

<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8'>
	<title>网址收藏夹</title>
	<link rel='stylesheet' href='style.css'>
</head>
<body>
	<div class='wrapper'>
		<div class='header'>
			<h1>网址收藏夹</h1>
			<form class='search-form'>
				<input type='text' name='search' placeholder='搜索'>
				<button type='submit'>搜索</button>
			</form>
		</div>
		<div class='content'>
			<table>
				<thead>
					<tr>
						<th>网址名</th>
						<th>URL</th>
						<th>状态</th>
					</tr>
				</thead>
				<tbody>
					<!-- 这里动态生成表格内容 -->
				</tbody>
			</table>
			<button class='add-btn'>添加</button>
			<button class='delete-btn'>删除</button>
			<button class='lock-btn'>锁定</button>
			<button class='unlock-btn'>解锁</button>
		</div>
	</div>
	<div class='dialog'>
		<form>
			<label>网址名：</label>
			<input type='text' name='name'>
			<label>URL：</label>
			<input type='text' name='url'>
			<label>状态：</label>
			<select name='status'>
				<option value='1'>正常</option>
				<option value='2'>异常</option>
				<option value='3'>已删除</option>
			</select>
			<button type='submit'>确定</button>
			<button type='button' class='cancel-btn'>取消</button>
		</form>
	</div>
	<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
	<script src='script.js'></script>
</body>
</html>

2. PHP 处理数据

PHP 主要负责处理用户提交的表单数据，可以使用 txt 本地来保存收藏的网址信息。

<?php
// 获取数据
$data = file_get_contents('data.txt');
if ($data) {
	$data = json_decode($data, true);
} else {
	$data = array();
}

// 处理表单提交
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
	$name = trim($_POST['name']);
	$url = trim($_POST['url']);
	$status = intval($_POST['status']);
	if ($name && $url && $status) {
		$newData = array(
			'name' => $name,
			'url' => $url,
			'status' => $status
		);
		array_push($data, $newData);
		$data = json_encode($data);
		file_put_contents('data.txt', $data);
		echo json_encode(array('success' => true));
	} else {
		echo json_encode(array('success' => false));
	}
}

// 输出数据
echo json_encode($data);
?>

3. jQuery 处理用户交互

jQuery 主要负责处理用户的操作，例如点击添加按钮时弹出一个对话框，输入网址名和 URL 以及状态等信息，然后将其提交给 PHP 文件处理。可以使用 jQuery 的 ajax 方法实现异步提交表单数据，避免页面刷新。

$(document).ready(function() {
	// 动态生成表格内容
	$.ajax({
		url: 'get_data.php',
		type: 'GET',
		dataType: 'json',
		success: function(data) {
			var html = '';
			$.each(data, function(index, item) {
				html += '<tr>';
				html += '<td>' + item.name + '</td>';
				html += '<td>' + item.url + '</td>';
				html += '<td>' + item.status + '</td>';
				html += '</tr>';
			});
			$('tbody').html(html);
		},
		error: function() {
			alert('获取数据失败');
		}
	});

	// 点击添加按钮弹出对话框
	$('.add-btn').click(function() {
		$('.dialog').show();
	});

	// 点击取消按钮关闭对话框
	$('.cancel-btn').click(function() {
		$('.dialog').hide();
	});

	// 提交表单数据
	$('form').submit(function(event) {
		event.preventDefault();
		var data = $(this).serialize();
		$.ajax({
			url: 'add_data.php',
			type: 'POST',
			data: data,
			dataType: 'json',
			success: function(data) {
				alert('添加成功');
				$('.dialog').hide();
			},
			error: function() {
				alert('添加失败');
			}
		});
	});

	// 点击删除按钮删除选中行
	$('.delete-btn').click(function() {
		var selected = $('tbody input[type="checkbox"]:checked');
		if (selected.length > 0) {
			if (confirm('确定要删除选中的行吗？')) {
				selected.each(function() {
					$(this).closest('tr').remove();
				});
			}
		} else {
			alert('请选择要删除的行');
		}
	});

	// 点击锁定按钮禁用表格
	$('.lock-btn').click(function() {
		$('table input[type="checkbox"]').prop('disabled', true);
	});

	// 点击解锁按钮启用表格
	$('.unlock-btn').click(function() {
		$('table input[type="checkbox"]').prop('disabled', false);
	});

	// 实时搜索
	$('input[name="search"]').keyup(function() {
		var keyword = $(this).val();
		$('tbody tr').each(function() {
			var name = $(this).find('td:first-child').text();
			if (name.indexOf(keyword) >= 0) {
				$(this).show();
			} else {
				$(this).hide();
			}
		});
	});
});

4. CSS 样式设计

CSS3 主要用于美化页面样式，例如使用表格样式和动态效果等。可以使用 CSS3 的 transition 和 animation 属性实现动态效果，也可以使用 CSS 预处理器或者前端框架来简化样式编写过程，并提高兼容性。

.wrapper {
	max-width: 800px;
	margin: 0 auto;
}
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px;
}
.header h1 {
	margin: 0;
	font-size: 28px;
}
.search-form {
	display: flex;
	align-items: center;
}
.search-form input[type='text'] {
	padding: 5px 10px;
	border: none;
	border-radius: 5px;
	margin-right: 10px;
}
.search-form button {
	padding: 5px 10px;
	border: none;
	border-radius: 5px;
	background-color: #008CBA;
	color: #fff;
	cursor: pointer;
}
.content {
	padding: 20px;
}
table {
	width: 100%;
	border-collapse: collapse;
}
table thead th {
	padding: 10px 5px;
	text-align: left;
	border-bottom: 1px solid #ddd;
}
table tbody td {
	padding: 10px 5px;
	border-bottom: 1px solid #ddd;
}
table tbody td:first-child {
	width: 40%;
}
button {
	padding: 5px 10px;
	border: none;
	border-radius: 5px;
	background-color: #008CBA;
	color: #fff;
	cursor: pointer;
	margin-right: 10px;
}
.dialog {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.5);
	display: none;
	justify-content: center;
	align-items: center;
}
.dialog form {
	background-color: #fff;
	padding: 20px;
	border-radius: 5px;
}
.dialog label {
	display: block;
	margin-bottom: 10px;
}
.dialog input[type='text'],
.dialog select {
	padding: 5px 10px;
	border: none;
	border-radius: 5px;
	margin-bottom: 10px;
	width: 100%;
}
.dialog button[type='submit'],
.dialog button[type='button'] {
	padding: 5px 10px;
	border: none;
	border-radius: 5px;
	background-color: #008CBA;
	color: #fff;
	cursor: pointer;
}
.dialog button[type='button'] {
	margin-left: 10px;
	background-color: #ccc;
}

5. 安全性考虑

保存网址信息时需要考虑安全性问题，可以使用 PHP 的过滤函数对用户输入进行过滤和验证，防止注入攻击等。在使用文件操作函数时，需要确保文件的读写权限和路径等设置正确，避免出现错误。

6. 搜索功能

搜索功能中可以使用 jQuery 实现模糊搜索，可以使用 jQuery 的keyup事件实现实时搜索，并使用 jQuery 的选择器筛选符合条件的网址信息并显示出来。在处理大量数据时需要注意性能问题，可以考虑使用后端的搜索引擎或者数据库来提高搜索效率。

7. 代码可读性和可维护性

在编写代码时需要注意代码的可读性和可维护性，可以使用代码规范和注释来提高代码质量和可维护性。可以使用 PHP 的函数和类来组织代码，避免出现冗余代码和难以维护的代码结构。

通过以上步骤，你就可以使用 PHP+jQuery+CSS3 实现一个功能丰富的网址收藏夹，并且可以根据自己的需求进行扩展和改进。

PHP+jQuery+CSS3 实现网址收藏夹功能

原文地址: https://www.cveoy.top/t/topic/mQhS 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录