• 日期: 2026-11-28
  • 标签: 常规

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

本文将详细介绍如何使用 PHP、jQuery 和 CSS3 创建一个简单的网址收藏夹功能，并提供示例代码。该功能包含添加、删除、锁定、搜索等操作，可以帮助用户方便地管理和访问收藏的网址。

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="container">
		<h1>网址收藏夹</h1>
		<form action="submit.php" method="post">
			<label for="name">网址名：</label>
			<input type="text" id="name" name="name" required>
			<label for="url">URL：</label>
			<input type="url" id="url" name="url" required>
			<label for="status">状态：</label>
			<select id="status" name="status">
				<option value="1">正常</option>
				<option value="0">锁定</option>
			</select>
			<button type="submit" class="add-btn">添加</button>
		</form>
		<div class="search-box">
			<label for="search">搜索：</label>
			<input type="text" id="search" placeholder="输入网址名或URL进行搜索">
		</div>
		<table>
			<thead>
				<tr>
					<th>网址名</th>
					<th>URL</th>
					<th>状态</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<!-- 数据会通过PHP动态生成 -->
			</tbody>
		</table>
	</div>
	<script src="jquery.min.js"></script>
	<script src="script.js"></script>
</body>
</html>

2. PHP 处理逻辑

PHP 主要负责处理用户提交的表单数据，并对数据进行过滤和验证，防止注入攻击等。可以使用 PHP 的数组来存储收藏的网址信息，也可以使用文件操作函数将数据保存在本地 txt 文件中。

<?php
// 过滤和验证用户输入
$name = filter_input(INPUT_POST, 'name', FILTER_SANITIZE_STRING);
$url = filter_input(INPUT_POST, 'url', FILTER_VALIDATE_URL);
$status = filter_input(INPUT_POST, 'status', FILTER_VALIDATE_INT);

if (!$name || !$url || !$status || !in_array($status, [0, 1])) {
	die('提交的数据不合法');
}

// 保存数据到txt文件中
$file = 'data.txt';
$data = file_get_contents($file);
$data = $data ? json_decode($data, true) : [];
$data[] = ['name' => $name, 'url' => $url, 'status' => $status];
file_put_contents($file, json_encode($data));

// 返回添加的数据
header('Content-Type: application/json');
echo json_encode(['name' => $name, 'url' => $url, 'status' => $status]);

3. jQuery 脚本

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

// 异步提交表单
$('form').submit(function(e) {
	e.preventDefault();
	$.ajax({
		url: $(this).attr('action'),
		type: $(this).attr('method'),
		data: $(this).serialize(),
		dataType: 'json',
		success: function(data) {
			addRow(data);
			$('form')[0].reset();
		},
		error: function(xhr, status, error) {
			alert('提交失败，请重试');
		}
	});
});

// 添加行
function addRow(data) {
	var tr = $('<tr>');
	tr.append($('<td>').text(data.name));
	tr.append($('<td>').html('<a href="' + data.url + '">' + data.url + '</a>'));
	tr.append($('<td>').text(data.status ? '正常' : '锁定'));
	var td = $('<td>');
	td.append($('<button>').text('删除').click(deleteRow));
	tr.append(td);
	$('table tbody').append(tr);
}

// 删除行
function deleteRow() {
	if (confirm('确定要删除吗？')) {
		$(this).closest('tr').remove();
	}
}

// 搜索
$('#search').keyup(function() {
	var keyword = $(this).val().toLowerCase();
	$('table tbody tr').each(function() {
		var name = $(this).find('td:first-child').text().toLowerCase();
		var url = $(this).find('td:nth-child(2) a').attr('href').toLowerCase();
		if (name.indexOf(keyword) !== -1 || url.indexOf(keyword) !== -1) {
			$(this).show();
		} else {
			$(this).hide();
		}
	});
});

4. CSS 样式

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

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background-color: #f2f2f2;
	font-family: Arial, sans-serif;
}

.container {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
}

h1 {
	text-align: center;
	margin-bottom: 20px;
}

form {
	margin-bottom: 20px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

label {
	flex-basis: 80px;
}

input[type="text"],
input[type="url"],
select {
	flex-grow: 1;
	padding: 10px;
	margin-right: 10px;
	border-radius: 5px;
	border: none;
	background-color: #f6f6f6;
}

.add-btn {
	padding: 10px 20px;
	background-color: #008cba;
	color: #fff;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: all .3s ease;
}

.add-btn:hover {
	background-color: #005f7f;
}

.search-box {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

#search {
	padding: 10px;
	flex-grow: 1;
	border-radius: 5px;
	border: none;
	background-color: #f6f6f6;
}

table {
	width: 100%;
	border-collapse: collapse;
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}

thead {
	background-color: #008cba;
	color: #fff;
}

th, td {
	padding: 10px;
	text-align: left;
}

th:first-child, td:first-child {
	width: 30%;
}

th:nth-child(2), td:nth-child(2) {
	width: 50%;
}

th:last-child, td:last-child {
	width: 20%;
	text-align: center;
}

td:last-child button {
	padding: 5px 10px;
	background-color: #f44336;
	color: #fff;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: all .3s ease;
}

td:last-child button:hover {
	background-color: #d32f2f;
}

td.locked {
	background-color: #f6f6f6;
	color: #aaa;
}

tr:nth-child(even) {
	background-color: #f2f2f2;
}

tr:hover {
	background-color: #ddd;
}

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

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

总结

通过以上步骤，你就可以使用 PHP、jQuery 和 CSS3 创建一个简单的网址收藏夹功能，包含添加、删除、锁定、搜索等操作。希望本文对你有所帮助。

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

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

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