Django如何实现按钮点击触发数据库角色等级值加1并同步页面更新

前置问题修复 #

你当前的主视图代码存在一个低级笔误，会直接导致页面渲染异常：

• 原本取角色的代码.order_by('character_Name').first 是把QuerySet的first方法本身传入了模板，没有加括号执行，拿不到实际的角色对象。需要改成.first()才能正确获取当前用户对应的第一条角色数据。

分步实现功能 #

1. 新增独立的等级更新处理视图 #

不要把更新逻辑硬塞到现有main视图里，专门新建一个处理POST请求的视图负责等级递增，在views.py中追加代码：

from django.http import JsonResponse
from django.views.decorators.http import require_POST

@require_POST
def increase_character_level(request):
    # 校验登录状态
    if not request.user.is_authenticated:
        return JsonResponse({'status': 'error', 'msg': '未登录'}, status=403)
    # 取当前用户关联的角色
    character = Character.objects.filter(user=request.user).order_by('character_Name').first()
    if not character:
        return JsonResponse({'status': 'error', 'msg': '当前用户无关联角色'}, status=404)
    # 匹配模型定义的20级上限规则
    if character.level >= 20:
        return JsonResponse({'status': 'success', 'new_level': character.level, 'msg': '已达最高等级'})
    # 等级+1并落库，只更新level字段减少数据库开销
    character.level += 1
    character.save(update_fields=['level'])
    # 返回最新等级给前端做页面更新
    return JsonResponse({'status': 'success', 'new_level': character.level})

2. 补充对应路由 #

在urls.py的路由列表里加上刚才新建视图的访问路径：

path('increase-level', views.increase_character_level, name='increase_level'),

3. 改造前端页面实现点击交互 #

Django对POST请求默认做CSRF校验，需要先把CSRF Token传到前端的JS逻辑里，再实现按钮点击的异步请求逻辑，改造后的main.html代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<body>
  {% csrf_token %}
  <h1>{{ characters.character_Name }}</h1>
  <h4>Level: <span id="level-text">{{ characters.level }}</span></h4>
  <button onclick="increase_level()"> + 1 </button>

  <script>
    // 从模板渲染的隐藏input里读取CSRF Token
    const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
    async function increase_level() {
      // 发起异步POST请求到更新接口
      const res = await fetch("{% url 'increase_level' %}", {
        method: 'POST',
        headers: {
          'X-CSRFToken': csrfToken
        }
      })
      const result = await res.json()
      if (result.status === 'success') {
        // 拿到返回的最新等级，直接更新页面上的文本，无需整页刷新
        document.querySelector('#level-text').innerText = result.new_level
      } else {
        alert(result.msg)
      }
    }
  </script>
</body>
</html>

实现效果说明 #

• 点击按钮后直接向后端发更新请求，数据库里的角色等级会在原有值基础上+1
• 后端返回最新等级后前端会直接替换显示文本，不需要整页重载，交互流畅
• 全程匹配你模型里定义的规则：最高20级的限制、用户和角色的关联校验、未登录拦截
• 数据库更新只提交level字段，比全字段保存效率更高

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