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元素正在使用该特定数据源。希望这对你有所帮助。谢谢！

在没有重新加载的情况下更新AJAX后的视图

2 个答案: