Django的：無刷新更新

頁面信息

我一直試圖讓我的網站更新的這一部分，只要按下一個按鈕：Django的：無刷新更新

在我的模板，我通過{{ 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"); 
     } 
    }) 
    };

我怎樣才能得到這個工作？

來源

2017-05-29 iFengo

如果您有throubles更新DOM的內容，把你的模板也是html代碼。 –

我想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 
     } 
    }) 
    };

來源

2017-05-29 22:00:01

我在控制檯 – iFengo

Good :)中獲得'Object {coins：6725}'現在，使用jquery選擇包含硬幣數量的DOM元素並使用'data.coins'更新它。如果您不熟悉jQuery選擇器，請發佈您的HTML，我會幫你 –

我的HTML看起來像： '餘額： {{request.user.profile.coins}}所以我應該做$（「.status」）.something（data.coins）？ – iFengo

Django的：無刷新更新

回答

相關問題