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

# 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}"

# 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)

# 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'),
]

<!-- 在head部分添加，或者在body的任何位置 -->
<meta name="csrf-token" content="{{ csrf_token }}">

<!-- 或者在表单中获取 -->
<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">

// 方法一：从meta标签获取
const csrftoken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

// 方法二：从隐藏的input字段获取
// const csrftoken = document.querySelector('input[name="csrfmiddlewaretoken"]').value;

// 方法三：从cookie中获取（Django默认将CSRF token存储在名为'csrftoken'的cookie中）
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
const csrftoken = getCookie('csrftoken');

// 假设这是您的游戏分数变量
var score = 0; 

// ... 您的游戏逻辑，例如分数增加和重置 ...
// if (frameCount % 5 == 0) {
//     score++;
// }
// if (pipes[i].hits(bird)) {
//     score = 0;
//     pipes = [];
//     return;
// }

// 当需要提交分数时调用此函数，例如在游戏结束时
function submitHighScore(currentScore) {
    const dataToSend = {
        'game_overall_score': currentScore
    };

    $.ajax({
        url: "/api/submit-score/", // 替换为您的Django URL
        type: "POST",
        contentType: "application/json", // 告诉服务器我们发送的是JSON数据
        headers: {
            'X-CSRFToken': csrftoken // 将CSRF token作为请求头发送
        },
        data: JSON.stringify(dataToSend), // 将JavaScript对象转换为JSON字符串
        success: function(response){
            // 分数提交成功后的处理
            console.log("分数提交成功:", response);
            alert("您的分数已成功提交！");
            // 您可以在这里更新UI，例如显示高分榜或成功消息
        },
        error: function(xhr, status, error){
            // 分数提交失败后的处理
            console.error("分数提交失败:", xhr.responseText);
            let errorMessage = "提交分数时发生错误。";
            try {
                const errorResponse = JSON.parse(xhr.responseText);
                errorMessage = errorResponse.message || errorMessage;
            } catch (e) {
                // 如果响应不是JSON，则使用默认错误消息
            }
            alert("提交分数失败：" + errorMessage);
            // 您可以在这里显示错误消息给用户
        }
    });
}

// 示例：通过一个按钮点击事件触发分数提交
// 假设页面上有一个ID为'submit-score-button'的按钮
$("#submit-score-button").on("click", function(){
    submitHighScore(score); // 提交当前的游戏分数
});

// 或者在游戏结束时自动触发
// function gameOver() {
//     // ... 游戏结束逻辑 ...
//     submitHighScore(score);
// }