js发表评论及回复代码

在JavaScript中实现发表评论及回复的功能，通常涉及到前端与后端的交互。以下是一个简单的示例，展示了如何使用JavaScript（结合HTML和CSS）来实现这一功能。

基础概念

前端：用户直接交互的部分，通常使用HTML、CSS和JavaScript构建。
后端：处理业务逻辑和数据存储的部分，可以使用各种编程语言和框架实现。
AJAX：异步JavaScript和XML，用于在不刷新页面的情况下与服务器交换数据并更新部分网页内容。

示例代码

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评论系统</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="comments-section">
        <h2>评论</h2>
        <ul id="comment-list"></ul>
        <form id="comment-form">
            <input type="text" id="username" placeholder="你的名字" required>
            <textarea id="comment" placeholder="你的评论" required></textarea>
            <button type="submit">发表评论</button>
        </form>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS部分（styles.css）

body {
    font-family: Arial, sans-serif;
}

#comments-section {
    width: 50%;
    margin: 0 auto;
}

#comment-form {
    margin-top: 20px;
}

#comment-list {
    list-style-type: none;
    padding: 0;
}

.comment {
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
}

JavaScript部分（script.js）

document.getElementById('comment-form').addEventListener('submit', function(event) {
    event.preventDefault();
    const username = document.getElementById('username').value;
    const comment = document.getElementById('comment').value;

    // 创建一个新的评论元素
    const li = document.createElement('li');
    li.className = 'comment';
    li.innerHTML = `<strong>${username}:</strong> ${comment}`;

    // 将新评论添加到列表中
    document.getElementById('comment-list').appendChild(li);

    // 清空表单
    document.getElementById('username').value = '';
    document.getElementById('comment').value = '';

    // 可选：将评论发送到服务器
    sendCommentToServer(username, comment);
});

function sendCommentToServer(username, comment) {
    fetch('/api/comments', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ username, comment })
    })
    .then(response => response.json())
    .then(data => {
        console.log('评论已成功发送到服务器:', data);
    })
    .catch((error) => {
        console.error('发送评论时出错:', error);
    });
}