Django实现按钮点击更新页面点击次数功能

下面提供两种常见实现方式，按需选择：

方式一：页面刷新式计数（简单易实现） #

这种方式每次点击按钮会刷新页面，适合不需要无刷新体验的场景。

1. 定义模型（可选，用于持久化计数） #

如果希望重启服务后计数不丢失，创建存储计数的模型：

# models.py
from django.db import models

class ClickCounter(models.Model):
    count = models.IntegerField(default=0)

    # 确保系统中只有一条计数记录
    def save(self, *args, **kwargs):
        if not self.pk and ClickCounter.objects.exists():
            return
        super().save(*args, **kwargs)

执行迁移命令创建数据表：

python manage.py makemigrations
python manage.py migrate

2. 编写视图函数 #

处理按钮点击请求，更新计数并渲染页面：

# views.py
from django.shortcuts import render
from .models import ClickCounter

def click_count(request):
    # 获取或创建唯一的计数记录
    counter, created = ClickCounter.objects.get_or_create(pk=1)
    if request.method == 'POST':
        counter.count += 1
        counter.save()
    return render(request, 'click_count.html', {'count': counter.count})

3. 配置URL路由 #

# urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('click/', views.click_count, name='click_count'),
]

4. 编写模板（click_count.html） #

显示计数和提交按钮：

<p>Times clicked: {{ count }}</p>
<form method="post">
    {% csrf_token %}
    <button type="submit">点击</button>
</form>

方式二：AJAX无刷新计数（用户体验更好） #

这种方式点击按钮后页面不刷新，直接更新计数数值，适合追求流畅体验的场景。

1. 模型（同方式一，用于持久化计数） #

复用方式一中的ClickCounter模型即可。

2. 编写API视图 #

专门处理AJAX请求，返回更新后的计数：

# views.py
from django.http import JsonResponse
from .models import ClickCounter

def update_count(request):
    if request.method == 'POST':
        counter, created = ClickCounter.objects.get_or_create(pk=1)
        counter.count += 1
        counter.save()
        return JsonResponse({'count': counter.count})
    return JsonResponse({'error': 'Invalid request'}, status=400)

3. 配置URL路由 #

在urls.py中新增API路由：

urlpatterns = [
    path('click/', views.click_count, name='click_count'),
    path('update-count/', views.update_count, name='update_count'),
]

4. 编写模板（click_count.html） #

添加AJAX逻辑实现无刷新更新：

<p>Times clicked: <span id="count">{{ count }}</span></p>
<button id="click-btn">点击</button>

<script>
const btn = document.getElementById('click-btn');
const countSpan = document.getElementById('count');

btn.addEventListener('click', async () => {
    const response = await fetch('{% url "update_count" %}', {
        method: 'POST',
        headers: {
            'X-CSRFToken': '{{ csrf_token }}',
            'Content-Type': 'application/json'
        }
    });
    const data = await response.json();
    if (data.count) {
        countSpan.textContent = data.count;
    }
});
</script>

补充：使用Session存储计数（无需数据库） #

如果不需要持久化计数（重启服务后重置），可以用Session替代模型，视图修改如下：

# 刷新式视图
def click_count(request):
    count = request.session.get('click_count', 0)
    if request.method == 'POST':
        count += 1
        request.session['click_count'] = count
    return render(request, 'click_count.html', {'count': count})

# AJAX式视图
def update_count(request):
    if request.method == 'POST':
        count = request.session.get('click_count', 0) + 1
        request.session['click_count'] = count
        return JsonResponse({'count': count})
    return JsonResponse({'error': 'Invalid request'}, status=400)

内容的提问来源于stack exchange，提问作者earningjoker430