Django教程：使用AJAX将JavaScript游戏分数传输并存储到后端模型

admin 百科 2025-12-12 21

Django教程：使用AJAX将JavaScript游戏分数传输并存储到后端模型-第1张图片-佛山资讯网

本教程详细介绍了如何在Django应用中高效地将前端JavaScript游戏分数传输并存储到后端模型。我们将摒弃传统的隐藏表单提交方式，转而采用更现代、灵活的AJAX技术。文章涵盖了Django模型、视图的后端配置，以及前端JavaScript/jQuery通过AJAX构建并发送JSON数据的方法，旨在帮助开发者构建稳定且用户友好的游戏高分榜功能。

引言：前端游戏分数与后端持久化

在Web游戏中，将玩家在前端（通常是JavaScript）获得的分数持久化到后端数据库是一个常见的需求，以便构建高分榜或记录玩家进度。初学者可能倾向于使用传统的HTML表单提交方式，例如创建一个隐藏的POST表单来传递分数。然而，这种方法往往不够灵活，需要页面刷新，并且在处理单点数据提交时显得笨重。

相比之下，使用异步JavaScript和XML (AJAX) 技术是更优的选择。AJAX允许前端在不刷新页面的情况下与后端进行通信，发送数据并接收响应，从而提供更流畅的用户体验。本教程将指导您如何在Django项目中，利用jQuery的AJAX功能，将JavaScript游戏分数安全、高效地存储到Django模型中。

Django后端配置

首先，我们需要在Django项目中设置好接收和处理分数的后端逻辑。

立即学习“Java免费学习笔记（深入）”；

1. 定义高分榜模型 (models.py)

创建一个模型来存储玩家分数。这个模型通常会关联到Django的内置User模型，以便记录是哪个玩家获得了分数。

# myapp/models.py
from django.db import models
from django.contrib.auth.models import User # 导入Django的User模型

class Ranking(models.Model):
    """
    高分榜模型，用于存储玩家的游戏分数。
    """
    player = models.ForeignKey(User, on_delete=models.CASCADE, verbose_name="玩家")
    game_overall_score = models.IntegerField(verbose_name="游戏总分", default=0)
    submission_date = models.DateTimeField(auto_now_add=True, verbose_name="提交日期")

    class Meta:
        ordering = ['-game_overall_score', 'submission_date'] # 按分数降序排列
        verbose_name = "高分榜记录"
        verbose_name_plural = "高分榜记录"

    def __str__(self):
        return f"{self.player.username} - {self.game_overall_score}"

登录后复制

说明：

player：一个外键，关联到User模型，确保每个分数都与一个注册用户相关联。
game_overall_score：存储游戏分数的整数字段。
submission_date：记录分数提交时间，有助于排序和追踪。

完成模型定义后，记得运行python manage.py makemigrations和python manage.py migrate来创建数据库表。

2. 创建分数提交视图 (views.py)

接下来，我们需要编写一个视图函数来处理前端发送的AJAX POST请求。这个视图将负责接收JSON格式的分数数据，验证其有效性，并将其保存到Ranking模型中。

# myapp/views.py
import json
from django.http import JsonResponse
from django.views.decorators.http import require_POST
from django.contrib.auth.decorators import login_required
from django.views.decorators.csrf import csrf_exempt # 通常不推荐直接使用，但在API场景下有时会考虑

from .models import Ranking

@require_POST # 确保只接受POST请求
@login_required # 确保只有登录用户才能提交分数
# @csrf_exempt # 如果前端不发送CSRF token，可以使用此装饰器跳过CSRF验证，但安全性会降低。
               # 推荐在前端发送X-CSRFToken头部。
def submit_game_score(request):
    """
    处理通过AJAX提交的游戏分数。
    接收JSON格式的数据，并保存到Ranking模型。
    """
    if not request.user.is_authenticated:
        return JsonResponse({'status': 'error', 'message': '用户未登录'}, status=401)

    try:
        # 解析请求体中的JSON数据
        data = json.loads(request.body)
        score = data.get('game_overall_score')

        if score is None or not isinstance(score, int):
            return JsonResponse({'status': 'error', 'message': '分数无效或未提供'}, status=400)

        # 可选：对分数进行进一步的服务器端验证，例如范围检查
        if score < 0:
            return JsonResponse({'status': 'error', 'message': '分数不能为负数'}, status=400)

        # 创建并保存Ranking实例
        Ranking.objects.create(
            player=request.user, # 直接使用当前登录用户
            game_overall_score=score
        )
        return JsonResponse({'status': 'success', 'message': '分数保存成功'})

    except json.JSONDecodeError:
        return JsonResponse({'status': 'error', 'message': '无效的JSON数据'}, status=400)
    except Exception as e:
        # 捕获其他可能的异常，如数据库错误
        return JsonResponse({'status': 'error', 'message': f'服务器内部错误: {str(e)}'}, status=500)

登录后复制

说明：

@require_POST：确保此视图只响应POST请求。
@login_required：强制用户必须登录才能提交分数，确保request.user可用。
json.loads(request.body)：解析前端发送的JSON格式请求体。
data.get('game_overall_score')：从解析后的数据中获取分数。
服务器端验证：对分数进行类型和值验证是防止作弊和确保数据完整性的关键步骤。
Ranking.objects.create(...)：使用当前登录用户和分数创建新的Ranking记录。
JsonResponse：返回JSON格式的响应，告知前端操作结果。

3. 配置URL路由 (urls.py)

将视图函数映射到一个URL路径，以便前端可以通过该URL发送AJAX请求。

# myproject/urls.py (项目级的urls.py) 或 myapp/urls.py (应用级的urls.py)
from django.urls import path
from myapp import views # 假设您的views.py在myapp应用中

urlpatterns = [
    # ... 其他URL配置 ...
    path('api/submit-score/', views.submit_game_score, name='submit_game_score'),
]

登录后复制

说明：