Обновление DOM после POST-запроса с помощью ajax / jQuery - PullRequest
0 голосов
/ 01 июля 2019

Я создаю «подобную» систему, которую пользователь может нажимать бесконечно, чтобы увеличить количество лайков. Я уже создаю запрос "post" 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')
        }
    });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...