Question

我有一个基本的评论部分，人们可以在其中提交反馈并回复其他人的反馈。我已经使用ajax提交了反馈，并且可以正常工作，div被添加到了父元素中，而无需刷新。但是，当我尝试在回复之前添加回复时，它不会更新内容，只有刷新后才添加回复。回复jQuery

$(function () {
    const $replyForm = $('#send-reply-form');

    $replyForm.on('submit', function (event) {
        event.preventDefault();
        const dataToSend = $replyForm.serialize();

        $.post($replyForm.attr('action'), dataToSend, function (serverData) {
            $('.comments-list').prepend(serverData);
        })
    })
})

控制器：

[HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> AddReply(AddFeedbackViewModel model)
        {
            var feedbackModel = await this.feedbackService.AddReply(model);

            return this.PartialView("_ReplySectionPartial", feedbackModel);
        }

_ReplySectionPartial

@model FeedbackViewModel

<div class="single-comment replyComment justify-content-between d-flex">
    <div class="user justify-content-between d-flex">
        <div class="thumb">
            <img src="~/images/blog/c6.jpg" alt="">
        </div>
        <div class="desc">
            <h5>
                <a href="#">@Model.Name</a>
            </h5>
            <p class="date">@Model.CreatedOn.Value.ToLongDateString()</p>
            <p class="comment">
                @Model.Comment
            </p>
        </div>
    </div>
</div>

问题是什么，为什么直到刷新后才更新？

Answer 1

我找到了解决方法，将id添加到父元素中，并使用它作为前缀。

$(function () {
    const $replyForm = $('#send-reply-form');

    $replyForm.on('submit', function (event) {
        event.preventDefault();
        const dataToSend = $replyForm.serialize();

        const dataArray = $replyForm.serializeArray();
        var feedbackId = dataArray[0].value;

        const feedbackParentElement = $('#' + feedbackId);

        $.post($replyForm.attr('action'), dataToSend, function (serverData) {
            $(feedbackParentElement).prepend(serverData);
        })
    })
})

Ajax不会在div前面加上

1 个答案: