Ajax xhr onload не вызывается в приложении django

Question

У меня есть приложение Django с сообщениями пользователей. Я пытаюсь добавить систему «лайк» / голосования. Я сделал это путем полного обновления страницы через перенаправление, где голосование было сделано, а затем перенаправлено обратно на ту же страницу с новым голосованием / как общее обновление. Затем я читал о ajax и о том, как я могу обновить часть страницы без полной перезагрузки.

let up_vote = document.getElementById("up-vote").addEventListener('click', () => {
    console.log("clicked");
    let xhr = new XMLHttpRequest();
    xhr.open('GET', "{% url 'up-vote' %}", true);
    console.log(xhr);
    xhr.onload = () => {
        console.log("inside");

    };
    console.log("outside");
});

Пока мой js выглядит следующим образом. Когда я нажимаю на кнопку «up-голосования», «clicked» печатается вместе с объектом xhr. Тем не менее, onload, кажется, никогда не вызывается, так как «изнутри» никогда не печатается, а вместо этого переходит прямо «наружу».

У меня такое ощущение, что проблема связана с путем URL, но я не знаю, как правильно получить путь. Базовая c файловая структура этого приложения:

app
|-static/app  
    |-scripts/*this js file*/  
    |-images  
    |-styles  
|-templates/app  
    |-html files
|-views.py *where the request is being made*
|-urls.py

urls.py содержит,

urlpatterns = [
    ...
    path('post/<int:pk>/up/', up_vote, name='up-vote'),
    ...
]

и views.py содержат,

@login_required()
def up_vote(request, pk):
    print("HI")
    obj = get_object_or_404(Post, pk=pk)
    uid = request.user.id
    if not obj.votes.exists(uid):
        obj.votes.up(uid)
    data = {
        'votes': obj.votes.count()
    }
    return JsonResponse(data)

Любая помощь или совет с благодарностью:)

ps Я также попробовал xhr.onreadystate, что заставляет думать, что путь URL неверен.

Answer 1

AJAX запрос (как вы могли догадаться по его названию) является асинхронным, поэтому он действительно будет проходить прямо «вовне».

В дополнение к этому, вы должны позвонить xhr.send()

let up_vote = document.getElementById("up-vote").addEventListener('click', () => {
    console.log("clicked");
    let xhr = new XMLHttpRequest();
    xhr.open('GET', "{% url 'up-vote' %}", true);
    console.log(xhr);
    xhr.onload = () => {
        console.log("inside");
    };
    xhr.send()
    console.log("outside");
});

PS: Я думаю, что ваши URL / представления имеют проблемы. Ваш вид и маршруты требуют pk, но ваш {% url 'up-vote' %} не передает pk ему