没有在 django 应用程序中调用 Ajax xhr onload答案

【问题标题】：Ajax xhr onload not being called within django app没有在 django 应用程序中调用 Ajax xhr onload
【发布时间】：2020-03-31 21:21:33
【问题描述】：

我有一个带有用户帖子的 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 似乎永远不会被称为“内部”，因为永远不会打印，而是直接传递到“外部”。

我感觉问题与 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 路径错误的原因。

【问题讨论】：

标签： javascript django ajax xmlhttprequest

【解决方案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 传递给它

【讨论】：

谢谢！我试图逐步了解发生了什么，所以没有添加.send()，因为我认为它会到达那里，但这更有意义。