AJAX發布后更新視圖而無需重新加載

Question

我試圖在AJAX發布后重新加載div的內容，但我真的不知道如何執行此操作。 我知道我必須用Jquery更新innerhtml，但是我被困在這里。

/* ----------------------------------------------
    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
        }
    });
});

Answer 2

您也可以使用Vue.js。此庫無需重新加載頁面即可更新視圖。

您要做的就是-從Ajax發送/獲取所需的數據，並在ajax響應更新vue數據源之后，然后由vue.js負責更新整個頁面（無需重新加載），無論使用哪個DOM元素該特定數據源。 希望這對您有所幫助。 謝謝！