javascript - AJAX 发布后更新 View 而不重新加载

Question

我试图在 AJAX 发布后重新加载 div 的内容，我真的不知道如何做到这一点。我知道我必须用 Jquery 更新 insidehtml，但我被困在这里。

/* ----------------------------------------------
    Like/Dislike
-----------------------------------------------*/

$('.like').on('click', function(event) {
    event.preventDefault();

    postId = event.target.dataset['postid'];

    console.log(postId)
    console.log(token) 
    console.log(urlLike)

    $.ajax({
        method: 'POST',
        url: urlLike,
        data: {postId: postId, _token: token},
    })
    .done(function(msg) {
        console.log(msg); // 
    });

这是我目前的 html，通过正常的重新加载，点赞计数会更新，并且通过一个简单的 if 语句，如果用户喜欢该帖子，则会获取一个处于事件状态的类。AJAX 调用后如何更新这个 span 类？

<div class="wis-numbers">
   <?php $likes = $post->likes->count() ?>
       <span style="cursor: pointer;" class="like @if( $post->isLiked ) active @endif" data-postid="{{ $post->id }}" data-original-title="{{ $likes }} vind ik leuks" data-toggle="tooltip" data-placement="bottom"><i class="zmdi zmdi-thumb-up" data-postid="{{ $post->id }}"></i> {{ $likes }}</span>
</div>

Answer 1

你只需要把它放在回调中

$('.like').on('click', function(event) {
    event.preventDefault();
    var postId = event.target.dataset['postid'],
        $counter = $('.wis-numbers span');
    $.ajax({
        method: 'POST',
        url: urlLike,
        data: {postId: postId, _token: token},
        success: function(response) {
                $counter.html(response); // if this is an object change to the value you want
        }
    });
});