Django：在不刷新页面的情况下更新页面信息

Question

Django：在不刷新页面的情况下更新页面信息

7

我一直在尝试让我的网站在按下按钮时更新以下部分：

在我的模板中，我通过{{ request.user.profile.coins }}访问此信息：

<span class="status">Balance:&nbsp;{{ request.user.profile.coins }}
  <img class="coin-img" src="{% static 'assets/coin.png' %}" height="40px" width="auto">
</span>

我在研究这个过程，尝试使用一个AJAX函数调用这个视图：

@login_required(login_url='users/login')

def coin_increase(request):
    """
    Function based view for increasing a user's coin balance
    """
    if request.is_ajax():
        try:
            user = request.user
        except User.DoesNotExist:
            raise Http404("No user matches the given query.")
        user.profile.coins += 5
        user.save()
        return render(request, 'home.html', {'home': home})
    else:
        raise Http404

AJAX函数如下：

function update_coins() {
    $.ajax({
      method: "POST",
      url: "/coins",
      data: {},
      success: function(data) {
        alert("test");
      }
    })
  };

我该如何让它工作？

- iFengo

如果您在更新DOM内容时遇到问题，请同时放置您的模板HTML代码。 - Ilario Pierbattista

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ilario Pierbattista · Accepted Answer

我猜测home.html是整个页面的模板，其中包含了我们感兴趣的部分。

问题就在这里：

return render(request, 'home.html', {'home': home})

您无需渲染整个页面即可更新部分内容，只需知道user.profile.coins的新值即可。最常用的技术是将该数据序列化为javascript可以理解的格式：JSON。

不确定您使用的django版本，也许这可以解决：

from django.http import JsonResponse
return JsonResponse({'coins':user.profile.coins})

然后：

function update_coins() {
    $.ajax({
      method: "POST",
      url: "/coins",
      data: {},
      success: function(data) {
        console.log(data) // check out how data is structured

        // Update the coin amount
        $('.status').contents()[0].textContent = 'Balance&nbsp'+data.coins
      }
    })
  };