校园表白墙的首页代码,用HTML+jquery+mysql实现
时间: 2023-06-15 15:06:51 浏览: 97
以下是校园表白墙的首页代码,使用了 HTML、jQuery 和 MySQL 实现:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>校园表白墙</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.container {
margin: 0 auto;
width: 80%;
}
.form-container {
margin-top: 20px;
border: 1px solid #ccc;
padding: 10px;
}
.form-container label {
display: inline-block;
width: 80px;
margin-bottom: 10px;
}
.form-container input[type="text"], .form-container textarea {
width: 100%;
padding: 5px;
margin-bottom: 10px;
border-radius: 3px;
border: 1px solid #ccc;
}
.form-container input[type="submit"] {
background-color: #318ce7;
color: #fff;
border: none;
border-radius: 3px;
padding: 10px 20px;
cursor: pointer;
}
.form-container input[type="submit"]:hover {
background-color: #297db6;
}
.message-container {
margin-top: 20px;
border: 1px solid #ccc;
padding: 10px;
}
.message-container .message {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
}
.message-container .message p {
margin: 0;
}
.message-container .message .meta {
font-size: 12px;
color: #666;
}
</style>
</head>
<body>
<div class="container">
<h1>校园表白墙</h1>
<div class="form-container">
<h2>我要表白</h2>
<form id="message-form" action="submit.php" method="post">
<label for="name">姓名:</label>
<input type="text" name="name" id="name">
<label for="content">表白内容:</label>
<textarea name="content" id="content" rows="5"></textarea>
<input type="submit" value="提交">
</form>
</div>
<div class="message-container">
<h2>表白留言板</h2>
<div id="message-list"></div>
</div>
</div>
<script>
// 获取留言列表
function getMessageList() {
$.ajax({
url: 'message.php',
type: 'get',
dataType: 'json',
success: function(data) {
var messageListHtml = '';
for (var i = 0; i < data.length; i++) {
var messageHtml = '<div class="message">';
messageHtml += '<p>' + data[i].content + '</p>';
messageHtml += '<div class="meta">' + data[i].name + ' ' + data[i].created_at + '</div>';
messageHtml += '</div>';
messageListHtml += messageHtml;
}
$('#message-list').html(messageListHtml);
}
});
}
$(document).ready(function() {
// 页面加载完成时获取留言列表
getMessageList();
// 提交留言
$('#message-form').submit(function(event) {
event.preventDefault();
var name = $('#name').val();
var content = $('#content').val();
$.ajax({
url: 'submit.php',
type: 'post',
data: {
name: name,
content: content
},
dataType: 'json',
success: function(data) {
if (data.status === 'success') {
$('#message-form')[0].reset();
getMessageList();
} else {
alert('提交失败');
}
}
});
});
});
</script>
</body>
</html>
```
这段代码包括了一个表单用于提交留言和一个区域用于展示留言。在页面加载完成时,会通过 AJAX 请求从服务器上获取留言列表,然后在页面上展示出来。用户填写表单后,点击提交按钮,会通过 AJAX 请求将留言内容提交到服务器上。服务器收到请求后,会将留言内容存储到 MySQL 数据库中。