Node.js 如何在nodeJs和Ajax中加载注释而不刷新页面

我现在面临的实际挑战是如何正确加载评论。我的Ajax正在创建注释，但我正在努力按照其他注释正确加载注释。 现在发生的事情是，注释加载了，但加载不正确，我正在努力将正确的

ID

加载到正确的位置。加载时，它会同时显示我的标题和描述，而不会加载日期

 <div class="container">
        <div class="row">
            <div class="col-sm-6 col-sm-offset-3">
                <h1>Comment App</h1>

                <form action="/programs/<%= program._id %>/createComment" method="POST" >
                    <div class="form-group">
                        <input name="name" id="username" class="form-control" placeholder="username">
                    </div>
                    <div class="form-group">
                        <textarea name="description" id="descriptioncomment" class="form-control" placeholder="comment"></textarea>
                    </div>
                    <div class="form-group">
                        <input type="submit" id="post-comment" class="btn btn-primary" value="Submit">
                    </div>
                </form>
                <ul id="commentList" class="list-group">
                </ul>
            </div>
        </div>
    </div>

    <section class="content-item" id="comments">
            <div class="row"  id="comment-lists" >
                <div class="col-sm-10" >
                    <h3 id="comments-count" ><%= program.programcomments.length%> </h3>
                    <% program.programcomments.forEach(comments=> { %>
                        <div class="media"  >
                            
                            <div class="media-body" >
                                <h4 class="media-heading" id="lists"  ><%= comments.name %></h4>
                                <p id="lists" ><%=comments.description %></p>
                                <ul class="list-unstyled list-inline media-detail pull-left" id="lists">
                                    <li id="lists"><i class="fa fa-calendar" ></i><%= moment(comments.createdAt).format('llll') %></li>
                                </ul>
                            </div>
                        </div>
                    <% });%>
                </div>
            </div>
    </section>

$('#post-comment').on('click', function(event) {
        event.preventDefault();
        
            
        $.ajax({
            url : "/programs/<%= program._id %>/createComment",
            method : 'POST',
            data : {
                name : $('#username').val(),
                description : $('#descriptioncomment').val()
            },
            success : function(result ) {
                $('.form-control').each(function () {
                    let comments = this.value;
                    $('#comment-lists').append($('#lists').text(comments)) 
                    document.getElementById('comments-count').innerHTML++
                    
                });
                $("#username").val('');
                $("textarea#descriptioncomment.form-control").val('');
            }
        }); 
    })  

评论应用


{ %>




$（“#发表评论”）。在（'click'，函数（事件）{
event.preventDefault（）；
$.ajax({
url:“/programs//createComment”，
方法：“POST”，
数据：{
名称：$（“#用户名”）.val（），
描述：$（'#descriptioncomment'）.val（）
},
成功：功能（结果）{
$（'.form控件'）。每个（函数（）{
让注释=this.value；
$（'.'注释列表'）。追加（$（'.'注释列表'）。文本（注释））
document.getElementById（'comments-count'）.innerHTML++
});
$（“#用户名”）.val（“”）；
$（“textarea#descriptioncomment.form控件”）.val（“”）；
}
}); 
})  

您对多个元素使用相同的ID，因此首先删除它们并使用类。然后，您可以在ajax的成功函数中使用输入值生成整个

媒体
div，然后将它们附加到
注释列表中

演示代码：


$（'post comment'）。在（'click'，函数（事件）{
event.preventDefault（）；
/*$.ajax({
url:“/programs//createComment”，
方法：“POST”，
数据：{
名称：$（“#用户名”）.val（），
描述：$（'#descriptioncomment'）.val（）
},
成功：功能（结果）{*/
//使用用户名和描述追加新的div
$（“#注释列表”）。追加(`
${$（'#用户名'）.val（）}
${$（'#descriptioncomment'）.val（）

${moment（new Date（））.format（'llll'）}

`)
$（“#注释计数”）.text（parseInt（$（“#注释计数”）.text（））+1）//更新总数
//然后是emtpy
$（“#用户名”）.val（“”）；
$（“textarea#descriptioncomment.form控件”）.val（“”）；
/*}
});*/
})；

评论应用


2.
Abc
Descp xyz

23-2-2022

Abc
Descp xyz

23-2-2022

非常感谢。您的代码运行正常，再次感谢，我非常感谢@Swati的帮助