如何在 Django + jQuery 中刷新页面的一部分？

Question

我创建了一个演示项目，其中我有两个名为“1”和“2”的 link，并显示数字 1 或 2，具体取决于单击哪个 link。

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 库并尝试以页面不重新加载的方式调用第一个 link。我对 JS 了解很少，所以这基本上是 copy/paste 代码。现在单击第一个 link 不会执行任何操作。我做错了什么？

Answer 1

您的 count 视图应该 return 计算值而不是重定向：

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>

如何在 Django + jQuery 中刷新页面的一部分？

How to refresh parts of a page in Django + jQuery?

javascript

django

ajax

jquery

rating