Ajax点击事件：首次新增数据无法即时获取显示问题求助

我在页面中通过按钮点击事件，用Ajax同时完成数据提交（Post）和列表展示（Get）。现在遇到的问题是：首次根据对应ID提交数据后，无法即时看到新增的第一条数据（Ajax Get方法没拿到这条数据）；刷新页面后数据会显示，之后新增的数据不用刷新就能即时展示，控制台也没报错。

相关代码 #

JavaScript部分 #

$("#btnAddComment").click(function () {
    let id = @Model.TaskLists.TaskID;
    let addValue = {
        CommentDetail: $("#txtCommentDetail").val(),
        TaskId: @Model.TaskLists.TaskID,
    }
    $.ajax({
        type: "Post",
        url: "/TaskList/AddComment/",
        data: addValue,
        success: function (addFn) {
            $.ajax({
                contentType: "application/json",
                dataType: "json",
                type: "get",
                url: "/TaskList/GetComment/",
                data: { TaskId: id },
                success: function (getFn) {
                    let values = jQuery.parseJSON(getFn);
                    console.log(values);
                    let addDiv = "<div class='position-relative'>";
                    $.each(values, (index, value) => {
                        const getCreateDate = (`${value.CommentDate}`);
                        const dateTime = new Date(getCreateDate);
                        const formattedDateTime = `${('0' + dateTime.getDate()).slice(-2)}.${('0' + (dateTime.getMonth() + 1)).slice(-2)}.${dateTime.getFullYear()} ${('0' + dateTime.getHours()).slice(-2)}:${('0' + dateTime.getMinutes()).slice(-2)}`;
                        addDiv += `<div class="p-4 rounded-2 bg-light mb-3"><div class="d-flex align-items-center gap-3"><h6 class="fw-semibold mb-0 fs-4">${value.CommentUser}</h6><span class="fs-2"><span class="p-1 bg-muted rounded-circle d-inline-block"></span> ${formattedDateTime}</span></div><p class="my-3">${value.CommentDetail}</p></div>`;
                    });
                    addDiv += "</div>";
                    $(".position-relative").empty();
                    $("#divCommentDetail").html(addDiv);
                }
            });
        }
    });
});

HTML部分 #

<div id="divCommentDetail" class="position-relative">
    <div class="p-4 rounded-2 bg-light mb-3">
        <div class="d-flex align-items-center gap-3">
            <h6 class="fw-semibold mb-0 fs-4">@item.CommentUser</h6>
            <span class="fs-2"><span class="p-1 bg-muted rounded-circle d-inline-block"></span> @Convert.ToDateTime(@item.CommentDate).ToString("dd.MM.yyyy HH:mm")</span>
        </div>
        <p class="my-3">@item.CommentDetail</p>
    </div>
</div>

可能的原因及解决方案 #

1. Get请求被浏览器缓存 #

浏览器默认会缓存Get请求的结果，首次请求后，后续相同URL的Get会直接用缓存，导致拿不到最新数据。

• 解决：在Get请求中添加cache: false参数，或者给URL加时间戳参数：

  $.ajax({
      // ...其他参数
      cache: false,
      // 或者 url: "/TaskList/GetComment/?t=" + new Date().getTime(),
      // ...
  });
  

2. Post数据未完全持久化就发起Get #

后端AddComment接口可能在数据还没完全写入数据库（比如事务未提交、异步操作延迟）就返回了响应，此时Get请求查不到刚提交的数据。

• 解决：确保后端接口在数据成功写入数据库并提交事务后再返回响应，比如同步执行写入逻辑，避免异步延迟。

3. 多余的JSON解析导致异常 #

已经设置了dataType: "json"，jQuery会自动把响应解析成JSON对象，再用jQuery.parseJSON(getFn)会重复解析，可能导致首次数据处理异常。

• 解决：直接使用getFn作为解析后的JSON对象，去掉let values = jQuery.parseJSON(getFn);，改成let values = getFn;。

4. DOM操作选择器不准确 #

用.position-relative选择器清空内容，可能选中页面中其他同类元素，导致目标容器的内容未正确更新。

• 解决：直接操作目标容器$("#divCommentDetail")，先清空再插入新内容：

  $("#divCommentDetail").empty();
  $("#divCommentDetail").html(addDiv);
  

修改后的完整JavaScript代码 #

$("#btnAddComment").click(function () {
    let id = @Model.TaskLists.TaskID;
    let addValue = {
        CommentDetail: $("#txtCommentDetail").val(),
        TaskId: @Model.TaskLists.TaskID,
    }
    $.ajax({
        type: "Post",
        url: "/TaskList/AddComment/",
        data: addValue,
        success: function () {
            $.ajax({
                contentType: "application/json",
                dataType: "json",
                type: "get",
                url: "/TaskList/GetComment/",
                data: { TaskId: id },
                cache: false,
                success: function (values) {
                    console.log(values);
                    let addDiv = "<div class='position-relative'>";
                    $.each(values, (index, value) => {
                        const getCreateDate = `${value.CommentDate}`;
                        const dateTime = new Date(getCreateDate);
                        const formattedDateTime = `${('0' + dateTime.getDate()).slice(-2)}.${('0' + (dateTime.getMonth() + 1)).slice(-2)}.${dateTime.getFullYear()} ${('0' + dateTime.getHours()).slice(-2)}:${('0' + dateTime.getMinutes()).slice(-2)}`;
                        addDiv += `<div class="p-4 rounded-2 bg-light mb-3"><div class="d-flex align-items-center gap-3"><h6 class="fw-semibold mb-0 fs-4">${value.CommentUser}</h6><span class="fs-2"><span class="p-1 bg-muted rounded-circle d-inline-block"></span> ${formattedDateTime}</span></div><p class="my-3">${value.CommentDetail}</p></div>`;
                    });
                    addDiv += "</div>";
                    $("#divCommentDetail").empty();
                    $("#divCommentDetail").html(addDiv);
                    // 可选：清空输入框
                    $("#txtCommentDetail").val("");
                }
            });
        }
    });
});

内容的提问来源于stack exchange，提问作者Gökmen Ada