如何在Django + jQuery中刷新頁面的某些部分？

我創建了一個演示項目，其中我有兩個名爲'1'和'2'的鏈接，並根據所點擊的鏈接顯示數字1或2。如何在Django + jQuery中刷新頁面的某些部分？

models.py

class Count(models.Model): 
    num = models.IntegerField(default=0)

urls.py

urlpatterns = [ 
    url(r'^home/$', views.home, name='home'), 
    url(r'^count/(?P<pk>\d+)/$', views.count, name='count'), 
]

views.py

def home(request): 
    c = Count.objects.filter(id=1) 
    return render(request, "alpha/home.html", {'c': c}) 

def count(request, pk): 
    c = Count.objects.filter(id=1).update(num=pk) 
    return HttpResponseRedirect(reverse('alpha:home'))

home.html做爲

<html> 
<head> 
    <script type="text/javascript" src="jquery-2.1.4.min.js"></script> 
</head> 

<body> 
{% for c in c %} 
    <span id="num"> {{ c.num }} </span> 
{% endfor %} 

<a href="#" onclick="$.ajax({ 
      url: '{% url 'alpha:count' 1 %}', 
      success: function(data) { 
       $('#num').text({{ c.num }}); 
       } 
      })">1</a> 
<a href="{% url 'alpha:count' 2 %}">2</a> 
</body> 
</html>

正如你可以看到，count視圖更新模型，然後重新加載home視圖，從而刷新該答案（其爲1或2）。但在模板文件中，我試圖包含jQuery庫，並試圖以這種方式調用第一個鏈接，以避免頁面重新加載。我知道很少的JS，所以這基本上是複製/粘貼代碼。點擊第一個鏈接現在不會執行任何操作。我做錯了什麼？

來源

2015-09-14 MiniGunnR

你count視圖應該返回計數值，而不是重定向：

def count(request, pk): 
    c = Count.objects.filter(id=1).update(num=pk) 
    return new HttpResponse(pk)

你的AJAX調用應該更新span的價值基於來自服務器的響應：

$.ajax({ 
    url: '{% url 'alpha:count' 1 %}', 
    success: function(data) { 
     $('#num').text(data); 
    } 
})

此外，我想將AJAX解壓縮爲一個函數，例如：

function updateCount(value){ 
    $.ajax({ 
     url: '/count/' + value, 
     success: function(data) { 
      $('#num').text(data); 
     } 
    }) 
}

然後在您的HTML中重複使用它兩次：

<a href="#" onclick="updateCount(1);">1</a> 
<a href="#" onclick="updateCount(2);">2</a>

來源

2015-09-14 06:55:47 slomek

我有幾個問題。 'new'的目的是什麼，爲什麼我們要返回計數視圖最後一行的'pk'。我們不應該返回'c'嗎？ – MiniGunnR

就我所知，你不能直接返回模型（或者只是針對JsonResponse，我不確定）。在你的代碼中，你不需要獲得一個完整的對象，只需要它的屬性值，這就是爲什麼它只返回'pk'。 – slomek

這不起作用。我在模板中包含了'updateCount'函數和''標記，然後在第二個鏈接上使用'updateCount（2）'。我做了第一個鏈接，就像你的第一個例子。沒有鏈接工作，價值沒有得到更新。我真的是JS的新手。你認爲我錯過了什麼嗎？如果你沒有告訴我一些非常基本的東西，並且你認爲我應該知道這一點，請分享一下。我已經複製了您的代碼並將其完全粘貼。 – MiniGunnR

如何在Django + jQuery中刷新頁面的某些部分？

回答

相關問題