使用JS/JQuery制作简易留言板

这篇文章距离上次修改已过185天，其中的内容可能已经有所变动。

以下是一个使用JavaScript和jQuery简易留言板的示例代码：

HTML部分：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易留言板</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
 
<div id="guestbook">
    <h2>留言</h2>
    <form id="messageForm">
        <label for="nameField">姓名:</label>
        <input type="text" id="nameField" required><br><br>
        <label for="messageField">留言:</label>
        <textarea id="messageField" required></textarea><br><br>
        <button type="submit">提交</button>
    </form>
 
    <h2>查看留言</h2>
    <ul id="messagesList"></ul>
</div>
 
<script src="guestbook.js"></script>
</body>
</html>

JavaScript部分（guestbook.js）:




$(document).ready(function() {
    // 提交留言
    $('#messageForm').submit(function(e) {
        e.preventDefault();
        var name = $('#nameField').val();
        var message = $('#messageField').val();
        addMessage(name, message);
        $('#nameField').val('');
        $('#messageField').val('');
    });
 
    // 获取并显示留言
    loadMessages();
});
 
function addMessage(name, message) {
    var messageItem = '<li><strong>' + name + '</strong>: ' + message + '</li>';
    $('#messagesList').prepend(messageItem);
}
 
function loadMessages() {
    // 假设我们已经有了一个名为messages的对象，包含留言数据
    var messages = [
        // { name: '张三', message: '这是一条留言。' },
        // ...
    ];
 
    messages.forEach(function(message) {
        addMessage(message.name, message.message);
    });
}

这个例子中，留言板包含一个表单用于提交留言，同时展示已有的留言。留言存储在messages数组中，但在实际应用中，它们可能会存储在服务器端的数据库中。加载留言时，可以通过AJAX从服务器获取数据。

使用JS/JQuery制作简易留言板

评论已关闭

推荐阅读