以下是一个简单的
jQuery 留言板的示例代码：
HTML 代码：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
jQuery 留言板</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<h1>
jQuery 留言板</h1>
<form id="message-form">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required>
<label for="message">
留言：</label>
<textarea id="message" name="message" required></textarea>
<input type="submit" value="提交">
</form>
<ul id="message-list">
<!-- 这里将显示
留言列表 -->
</ul>
</div>
<script src="https://code.
jquery.com/
jquery-3.6.0.min.js"></script>
<script src="app.js"></script>
</body>
</html>
```
CSS 代码：
```css
body {
font-family: Arial, sans-serif;
}
#container {
margin: 0 auto;
max-width: 600px;
padding: 20px;
}
h1 {
text-align: center;
}
label {
display: inline-block;
margin-bottom: 5px;
}
input[type="text"],
textarea {
display: block;
margin-bottom: 15px;
width: 100%;
}
input[type="submit"] {
display: block;
margin: 15px auto;
}
ul {
list-style: none;
padding: 0;
}
li {
margin-bottom: 20px;
border: 1px solid #ccc;
padding: 10px;
}
li h2 {
margin-top: 0;
}
li p {
margin-bottom: 0;
}
```
JavaScript 代码：
```javascript
$(function() {
// 获取
留言列表
getMessages();
// 提交
留言
$('#message-form').submit(function(event) {
event.preventDefault();
// 获取表单数据
var name = $('#name').val();
var message = $('#message').val();
// 发送 AJAX 请求
$.ajax({
type: 'POST',
url: 'submit.php',
data: {
name: name,
message: message
},
success: function(response) {
// 清空表单
$('#name').val('');
$('#message').val('');
// 刷新
留言列表
getMessages();
}
});
});
// 获取
留言列表
function getMessages() {
$.ajax({
type: 'GET',
url: 'get.php',
success: function(response) {
// 清空
留言列表
$('#message-list').empty();
// 显示
留言列表
$.each(response, function(index, message) {
var li = '<li><h2>' + message.name + '</h2><p>' + message.message + '</p></li>';
$('#message-list').append(li);
});
}
});
}
});
```
PHP 代码（submit.php）：
```php
<?php
// 获取表单数据
$name = $_POST['name'];
$message = $_POST['message'];
// 将
留言保存到数据库或文件中，这里只是简单地输出到控制台
echo '姓名：' . $name . '<br>';
echo '
留言：' . $message . '<br>';
?>
```
PHP 代码（get.php）：
```php
<?php
// 从数据库或文件中获取
留言列表，这里只是简单地返回一个数组
$messages = array(
array(
'name' => '张三',
'message' => '你好，世界！'
),
array(
'name' => '李四',
'message' => '今天天气不错。'
),
array(
'name' => '王五',
'message' => '明天去旅游。'
)
);
// 将
留言列表转换成 JSON 格式并输出
echo json_encode($messages);
?>
```
上述代码中，submit.php 和 get.php 分别用于提交
留言和获取
留言列表。在实际应用中，应该将
留言保存到数据库或文件中，而不是简单地输出到控制台。
此外，还需要注意防止 XSS 攻击。可以使用 PHP 的 htmlspecialchars 函数将
留言内容中的特殊字符转换成 HTML 实体，如下所示：
```php
$message = htmlspecialchars($_POST['message'], ENT_QUOTES, 'UTF-8');
```
以上就是一个简单的
jQuery 留言板的示例代码。
最低0.47元/天 解锁文章
1654
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
