javascript - 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-vote”时，“clicked”会与 xhr 对象一起打印。然而，onload 似乎永远不会被调用，因为“inside”永远不会被打印，而是直接传递到“outside”。

我感觉问题与 URL 路径有关，但我不知道如何正确获取路径。 该应用程序的基本文件结构是:

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)

非常感谢任何帮助或建议:)

附:我还尝试过 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:我认为您的网址/ View 有问题。您的 View 和路由需要 pk，但您的 {% url 'up-vote' %} 未向其传递 pk