如何实现添加评论后无需页面刷新即可更新评论列表？

问题描述 #

我目前使用Ajax加载评论列表，但希望在添加新评论后无需刷新页面就能展示新评论，能否提供帮助？

原拉取评论列表的Ajax代码：

// Yorum Listeleme
$(document).ready(function () {
    let id = $("#BlogID").val();
    $.ajax({
        contentType: "application/json",
        dataType: "json",
        type: "Get",
        data: { BlogID: id },
        url: "/Comment/CommentList/",
        success: function (funk) {
            let values = jQuery.parseJSON(funk);
            let htmlst = ``;
            $.each(values, (index, value) => {
                htmlst += `<div class="media"><img style="width:64px; height:64px;" src=${value.UserImage} alt="" class="img-fluid" />  <div class="media-body"> <h5 class="mt-0">${value.CommentUserName}</h5><p>${value.CommentContent}</p></div></div>`;
            });
            $("#listcom").html(htmlst);   
        }
    });
});

原添加评论的Ajax代码：

$("#btncommentadd").click(function () {
    let values = {
        BlogID: $("#BlogID").val(),
        CommentUserName: $("#CommentUserName").val(),
        CommentTitle: $("#CommentTitle").val(),
        CommentContent: $("#CommentContent").val(),
        CommentDate: $("#CommentDate").val()
    };
    $.ajax({
        type: "Post",
        url: "/Comment/CommentAdd/",
        data: values,
        success: function (fnk1) {             
            let result = jQuery.parseJSON(fnk1);
        }
    });
});

解决方案 #

方案1：添加成功后重新拉取评论列表

把加载评论列表的逻辑封装成可复用函数，在添加评论成功后调用该函数刷新列表，同时清空输入框提升用户体验。

修改后的评论列表加载代码：

// 封装评论列表加载函数
function loadCommentList() {
    let id = $("#BlogID").val();
    $.ajax({
        contentType: "application/json",
        dataType: "json",
        type: "Get",
        data: { BlogID: id },
        url: "/Comment/CommentList/",
        success: function (funk) {
            let values = jQuery.parseJSON(funk);
            let htmlst = ``;
            $.each(values, (index, value) => {
                htmlst += `<div class="media"><img style="width:64px; height:64px;" src=${value.UserImage} alt="" class="img-fluid" />  <div class="media-body"> <h5 class="mt-0">${value.CommentUserName}</h5><p>${value.CommentContent}</p></div></div>`;
            });
            $("#listcom").html(htmlst);   
        }
    });
}

// 页面初始化时加载评论列表
$(document).ready(function () {
    loadCommentList();
});

修改后的添加评论代码：

$("#btncommentadd").click(function () {
    let values = {
        BlogID: $("#BlogID").val(),
        CommentUserName: $("#CommentUserName").val(),
        CommentTitle: $("#CommentTitle").val(),
        CommentContent: $("#CommentContent").val(),
        CommentDate: $("#CommentDate").val()
    };
    $.ajax({
        type: "Post",
        url: "/Comment/CommentAdd/",
        data: values,
        success: function (fnk1) {             
            let result = jQuery.parseJSON(fnk1);
            // 假设后端返回的result包含success字段表示操作结果
            if (result.success) {
                loadCommentList(); // 刷新评论列表
                // 清空输入框
                $("#CommentUserName").val("");
                $("#CommentTitle").val("");
                $("#CommentContent").val("");
                $("#CommentDate").val("");
            }
        }
    });
});

方案2：直接插入新评论到列表顶部（更高效）

如果后端在添加评论后能返回新创建的评论完整数据，无需重新拉取整个列表，直接将新评论的HTML插入到列表最前端，减少服务器请求。

修改后的添加评论代码：

$("#btncommentadd").click(function () {
    let values = {
        BlogID: $("#BlogID").val(),
        CommentUserName: $("#CommentUserName").val(),
        CommentTitle: $("#CommentTitle").val(),
        CommentContent: $("#CommentContent").val(),
        CommentDate: $("#CommentDate").val()
    };
    $.ajax({
        type: "Post",
        url: "/Comment/CommentAdd/",
        data: values,
        success: function (fnk1) {             
            let newComment = jQuery.parseJSON(fnk1);
            // 确认新评论数据有效
            if (newComment && newComment.UserImage && newComment.CommentUserName) {
                // 构建新评论的HTML结构
                let newCommentHtml = `<div class="media"><img style="width:64px; height:64px;" src=${newComment.UserImage} alt="" class="img-fluid" />  <div class="media-body"> <h5 class="mt-0">${newComment.CommentUserName}</h5><p>${newComment.CommentContent}</p></div></div>`;
                // 插入到评论列表顶部
                $("#listcom").prepend(newCommentHtml);
                // 清空输入框
                $("#CommentUserName").val("");
                $("#CommentTitle").val("");
                $("#CommentContent").val("");
                $("#CommentDate").val("");
            }
        }
    });
});

方案对比 #

• 方案1：实现简单，无需修改后端逻辑，适合评论数量较少的场景
• 方案2：性能更优，减少一次HTTP请求，但需要后端支持返回新创建的评论数据

内容的提问来源于stack exchange，提问作者Ünsal GEL