Django集成JavaScript游戏分数：AJAX提交指南

# 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)
    game_overall_score = models.IntegerField(null=True) # 游戏总分

    def __str__(self):
        return f"{self.player.username}'s score: {self.game_overall_score}"

// var score = 0; // 游戏分数变量，假设在游戏逻辑中会更新
// ... 您的游戏逻辑，更新 score 变量 ...

// 示例：当玩家点击一个按钮时提交分数
// HTML中可能有一个这样的按钮: <button id="submit-score">上传分数</button>
$("#submit-score").on("click", function() {
    var score = 100; // 假设这是当前游戏的分数，实际应从游戏逻辑中获取
    var data = {};
    data['game_overall_score'] = score;
    // 如果玩家已登录，通常在Django视图中通过 request.user 获取，无需前端传递用户ID或名称。
    // 如果需要前端指定玩家（例如，未登录访客），则需要额外的逻辑。

    // 发送AJAX请求
    $.ajax({
        url: "/games/submit-score/", // 您的Django视图URL
        type: "POST",
        contentType: "application/json", // 声明发送的数据是JSON格式
        data: JSON.stringify(data), // 将JavaScript对象转换为JSON字符串
        headers: {
            'X-CSRFToken': getCookie('csrftoken') // 包含CSRF令牌
        },
        success: function(response) {
            console.log("分数提交成功！", response);
            // 可以在这里更新UI，例如显示“分数已保存”
        },
        error: function(xhr, status, error) {
            console.error("分数提交失败！", error);
            // 处理错误，例如显示错误消息
        }
    });
});

// 获取CSRF令牌的辅助函数 (通常在Django模板中提供)
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();
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

# views.py
import json
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt # 通常不需要，AJAX会携带CSRF token
from django.contrib.auth.decorators import login_required
from django.shortcuts import render, get_object_or_404
from .models import Ranking, Game # 假设您有Game模型，并已在models.py中定义

# 示例：加载游戏页面
def loadGame(request, slug):
    game = get_object_or_404(Game, slug=slug)
    return render(request, 'main/game-detail.html', {
        'game': game
    })

# 处理分数提交的视图
@login_required # 确保只有登录用户才能提交分数
# @csrf_exempt # 如果前端正确发送了CSRF token，则不需要这个装饰器
def submit_game_score(request):
    if request.method == 'POST':
        try:
            # 解析JSON数据
            data = json.loads(request.body)
            score = data.get('game_overall_score')

            if score is not None and isinstance(score, int):
                # 获取当前登录用户
                player = request.user

                # 创建或更新排行榜记录
                # 这里简单地创建新记录。如果需要更新现有最高分，逻辑会更复杂，
                # 例如：查询 player 的现有最高分，如果新分数更高则更新。
                Ranking.objects.create(player=player, game_overall_score=score)

                return JsonResponse({'status': 'success', 'message': '分数已成功保存！'})
            else:
                return JsonResponse({'status': 'error', 'message': '无效的分数数据！'}, status=400)
        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)
    return JsonResponse({'status': 'error', 'message': '只接受POST请求！'}, status=405)

# urls.py (在您的应用或项目根目录)
from django.urls import path
from . import views

urlpatterns = [
    # 示例：游戏详情页面的URL
    path('games/<slug:slug>/', views.loadGame, name='game_detail'),
    # 分数提交的URL
    path('games/submit-score/', views.submit_game_score, name='submit_game_score'),
    # ... 其他URL模式
]