在使用ajax / jQuery的POST请求后更新dom

时间:2019-07-01 20:34:40

标签: javascript php jquery ajax

我正在构建一个“喜欢”系统,用户可以无限点击以增加喜欢的数量。我已经构建了添加了类似内容的“发布” Ajax请求。我需要刷新当前点赞次数的系统。不应为每次点击刷新页面。这就是为什么我使用Ajax / jquery发布请求。

我已经尝试在Ajax请求中添加一个“成功”,以便在成功执行代码后可以执行代码。我还添加了一个可以放置喜欢的更新数量的地方:

喜欢:<span id="numberOfLikes">{{$new->likes}}</span></p>

    // Voeg CSRF-token toe aan de jQuery request. Wordt opgehaald     uit de <meta> tag bovenaan de pagina.
// Zie https://laravel.com/docs/5.8/csrf voor meer info over X-CSRF-Tokens.
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

// Dit hele blok wordt uitgevoerd na het klikken op de like-button
$('.like').on('click', function(event) {
    console.log("clicked the like button");

    // Ziet er ingewikkeld uit, maar is puur bedoeld voor het genereren van de base URL zonder ID parameter
    // Bijvoorbeeld: 'http://localhost/yourproject/public/'
    var baseUrl = window.location.href;
    var to = baseUrl.lastIndexOf('/');
    to = to == -1 ? baseUrl.length : to + 1;
    baseUrl = baseUrl.substring(0, to);

    // Voeg de dynamische ID toe aan het einde van de base URL. Dit haalt hij uit <form action="{{$new->id}}/addlike">
    // Voorbeeld apiUrl: 'http://localhost/yourproject/public/2/addlike'
    var apiUrl = baseUrl + $('.likeForm').attr('action');

    // Voer POST request uit
    $.ajax({
        method: 'POST',
        url: apiUrl,
        success: function(){

            console.log('worked')
        },
        error: function(){
            console.log('error')
        }
    });
});

0 个答案:

没有答案