• 日期: 2026-03-04 07:07:43
  • 标签: 科技

HTML代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>网址收藏夹</title>
	<link rel="stylesheet" href="style.css">
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="script.js"></script>
</head>
<body>
	<div class="container">
		<h1>网址收藏夹</h1>
		<form id="add-form">
			<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="正常">正常</option>
				<option value="异常">异常</option>
				<option value="未知">未知</option>
			</select>
			<button type="submit">添加</button>
		</form>
		<div class="search-box">
			<label for="search">搜索：</label>
			<input type="text" id="search" name="search">
		</div>
		<table>
			<thead>
				<tr>
					<th>网址名</th>
					<th>URL</th>
					<th>状态</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<!-- 表格数据通过PHP动态生成 -->
			</tbody>
		</table>
	</div>
</body>
</html>

CSS代码：

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

.container {
	margin: 0 auto;
	max-width: 800px;
	padding: 20px;
	background-color: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

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

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

label {
	flex-basis: 80px;
	flex-grow: 0;
	margin-right: 10px;
	line-height: 32px;
}

input[type="text"],
input[type="url"],
select {
	flex-grow: 1;
	line-height: 32px;
	padding: 0 10px;
	border: 1px solid #ccc;
	border-radius: 3px;
}

button[type="submit"] {
	flex-basis: 80px;
	flex-grow: 0;
	margin-left: 10px;
	line-height: 32px;
	background-color: #007fff;
	color: #fff;
	border: none;
	border-radius: 3px;
	cursor: pointer;
}

table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
}

thead {
	background-color: #f2f2f2;
}

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

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

td {
	padding: 10px;
}

td:last-child {
	text-align: center;
}

.action-btn {
	padding: 5px;
	background-color: #007fff;
	color: #fff;
	border: none;
	border-radius: 3px;
	cursor: pointer;
}

.action-btn:hover {
	background-color: #0066cc;
}

.search-box {
	margin-bottom: 20px;
}

.search-box label {
	margin-right: 10px;
}

.search-box input[type="text"] {
	width: 300px;
	padding: 5px;
	border: 1px solid #ccc;
	border-radius: 3px;
}

jQuery代码：

$(function() {
	// 添加表单提交
	$('#add-form').on('submit', function(event) {
		event.preventDefault(); // 阻止默认提交事件
		var formData = $(this).serialize(); // 序列化表单数据
		$.ajax({
			url: 'add.php',
			type: 'POST',
			data: formData,
			dataType: 'json',
			success: function(data) {
				if (data.success) {
					alert('添加成功');
					location.reload(); // 刷新页面
				} else {
					alert(data.message);
				}
			}
		});
	});

	// 删除按钮点击
	$('table').on('click', '.delete-btn', function() {
		var id = $(this).data('id');
		if (confirm('确定删除吗？')) {
			$.ajax({
				url: 'delete.php',
				type: 'POST',
				data: {id: id},
				dataType: 'json',
				success: function(data) {
					if (data.success) {
						alert('删除成功');
						location.reload(); // 刷新页面
					} else {
						alert(data.message);
					}
				}
			});
		}
	});

	// 锁定按钮点击
	$('table').on('click', '.lock-btn', function() {
		var id = $(this).data('id');
		var status = $(this).data('status');
		var newStatus = status == '正常' ? '锁定' : '正常';
		if (confirm('确定' + newStatus + '吗？')) {
			$.ajax({
				url: 'lock.php',
				type: 'POST',
				data: {id: id, status: newStatus},
				dataType: 'json',
				success: function(data) {
					if (data.success) {
						alert(newStatus + '成功');
						location.reload(); // 刷新页面
					} else {
						alert(data.message);
					}
				}
			});
		}
	});

	// 搜索框输入时实时搜索
	$('#search').on('keyup', function() {
		var keyword = $(this).val().trim();
		if (keyword) {
			$('tbody tr').hide().filter(function() {
				return $(this).text().indexOf(keyword) > -1;
			}).show();
		} else {
			$('tbody tr').show();
		}
	});
});

PHP代码：

<?php
// 过滤函数
function filterInput($input) {
	$input = trim($input);
	$input = stripslashes($input);
	$input = htmlspecialchars($input);
	return $input;
}

// 验证URL格式
function validateUrl($url) {
	return preg_match('/^https?:\/\/\w+(\.\w+)*(:\d+)?(\/\w*)*(\?\w+=\w+(&\w+=\w+)*)?$/', $url);
}

// 验证状态合法性
function validateStatus($status) {
	return in_array($status, ['正常', '异常', '未知']);
}

// 读取数据文件
function loadData() {
	$dataFile = 'data.txt';
	if (file_exists($dataFile)) {
		$data = file_get_contents($dataFile);
		if ($data) {
			return unserialize($data); // 反序列化数据
		}
	}
	return [];
}

// 保存数据到文件
function saveData($data) {
	$dataFile = 'data.txt';
	$data = serialize($data); // 序列化数据
	file_put_contents($dataFile, $data); // 写入数据
}

// 处理添加请求
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
	$name = filterInput($_POST['name']);
	$url = filterInput($_POST['url']);
	$status = filterInput($_POST['status']);
	if (!validateUrl($url)) {
		echo json_encode(['success' => false, 'message' => 'URL格式不正确']);
		exit;
	}
	if (!validateStatus($status)) {
		echo json_encode(['success' => false, 'message' => '状态不合法']);
		exit;
	}
	$data = loadData();
	$id = count($data) + 1;
	$data[] = ['id' => $id, 'name' => $name, 'url' => $url, 'status' => $status];
	saveData($data);
	echo json_encode(['success' => true]);
	exit;
}

// 处理删除请求
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['id'])) {
	$id = filterInput($_POST['id']);
	$data = loadData();
	foreach ($data as $key => $value) {
		if ($value['id'] == $id) {
			unset($data[$key]); // 删除数据
			saveData(array_values($data)); // 重新索引数组
			echo json_encode(['success' => true]);
			exit;
		}
	}
	echo json_encode(['success' => false, 'message' => '数据不存在']);
	exit;
}

// 处理锁定请求
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['id']) && isset($_POST['status'])) {
	$id = filterInput($_POST['id']);
	$status = filterInput($_POST['status']);
	if (!validateStatus($status)) {
		echo json_encode(['success' => false, 'message' => '状态不合法']);
		exit;
	}
	$data = loadData();
	foreach ($data as $key => $value) {
		if ($value['id'] == $id) {
			$data[$key]['status'] = $status; // 更新数据
			saveData($data);
			echo json_encode(['success' => true]);
			exit;
		}
	}
	echo json_encode(['success' => false, 'message' => '数据不存在']);
	exit;
}

// 处理搜索请求
if ($_SERVER['REQUEST_METHOD'] == 'GET' && isset($_GET['keyword'])) {
	$keyword = filterInput($_GET['keyword']);
	$data = loadData();
	$result = [];
	foreach ($data as $value) {
		if (strpos($value['name'], $keyword) !== false || strpos($value['url'], $keyword) !== false) {
			$result[] = $value;
		}
	}
	echo json_encode($result);
	exit;
}

// 输出表格数据
$data = loadData();
foreach ($data as $value) {
	echo '<tr>';
	echo '<td>' . htmlspecialchars($value['name']) . '</td>';
	echo '<td><a href="' . htmlspecialchars($value['url']) . '">' . htmlspecialchars($value['url']) . '</a></td>';
	echo '<td>' . htmlspecialchars($value['status']) . '</td>';
	echo '<td>';
	echo '<button class="action-btn delete-btn" data-id="' . $value['id'] . '">删除</button>';
	echo '<button class="action-btn lock-btn" data-id="' . $value['id'] . '" data-status="' . $value['status'] . '">' . ($value['status'] == '正常' ? '锁定' : '正常') . '</button>';
	echo '</td>';
	echo '</tr>';
}
按1234567的描述用php+JQ+CSS3写出代码1 HTML页面主要包含一个表格以及添加、删除、锁定、搜索等功能的按钮和输入框。表格的列包括网址名、URL、状态等信息。按钮和输入框可以使用HTML的表单元素实现。2 PHP主要负责处理用户提交的表单数据并对数据进行过滤和验证防止注入攻击等。可以使用PHP的数组来存储收藏的网址信息也可以使用文件操作函数将数据保存在本地txt文件中。3 jQue

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

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