📅 最后修改于: 2023-12-03 15:24:30.761000 🧑 作者: Mango
留言功能在网站开发中非常常见，常常用于用户评论、反馈、留言等。本篇文章将介绍如何在JavaScript中制作留言功能。
首先我们需要创建一个HTML页面，用来放置我们的留言板和留言输入框。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>留言板</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>留言板</h1>
<div id="messages">
<!-- 这里将显示留言 -->
</div>
<form>
<label for="message">留言：</label>
<input type="text" id="message" name="message"></input>
<button id="submit">提交</button>
</form>
<script src="js/message.js"></script>
</body>
</html>
上面的代码中，我们创建了一个包含留言板和留言输入框的HTML页面。其中，div元素的id为messages，我们将在JavaScript中向其中插入留言。form元素包含一个用于输入留言的input元素、一个用于提交留言的button元素。
然后我们需要使用JavaScript来实现以下功能：
div元素中插入留言。div元素中。以下是我们的JavaScript代码：
$(function() {
// 当页面加载时，从服务器获取留言列表
$.ajax({
type : "get",
async : true,
url : "http://localhost:8080/messages",
dataType : "json",
success : function(data) {
var messages = "";
$.each(data, function(index, message) {
messages += "<p>" + message.content + "</p>";
});
$("#messages").html(messages);
},
});
// 当用户点击提交按钮时
$("#submit").click(function() {
// 获取输入框中的内容
var message = $("#message").val();
// post请求，向服务器提交留言
$.ajax({
type : "post",
async : true,
url : "http://localhost:8080/messages",
data : {
content : message,
},
dataType : "json",
success : function(data) {
// 在留言板上显示新留言
$("#messages").prepend("<p>" + message + "</p>");
// 清空输入框
$("#message").val("");
},
});
});
});
上述代码中，我们使用$.ajax方法向服务器发送请求，获取先前留言的内容。我们将它们添加到一个名为messages的字符串中，并使用$("#messages").html(messages);将它们显示在留言板上。
在用户输入留言并点击提交按钮时，我们经过相似的过程。首先我们使用$("#message").val();获取输入框中的内容。然后，我们使用$.ajax方法将留言提交到服务器，并使用$("#messages").prepend("<p>" + message + "</p>");在留言板上显示新留言。
通过以上步骤，我们可以完成一个简单但实用的JavaScript留言功能。在实际开发中，我们可以将其进一步优化和扩展，使其更加完美。