# 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); // }

大家都在看：