功能实现前置准备
首先需要在Django项目中完成基础配置，确保已经创建好应用并注册到settings.py的INSTALLED_APPS中，同时配置好数据库相关设置。我们需要先定义一个存储游戏分数的模型，用来持久化保存玩家的分数数据。
定义游戏分数模型
在应用的models.py中定义分数模型，包含玩家标识、分数值、创建时间等基础字段：
from django.db import models
class GameScore(models.Model):
# 玩家标识，可根据实际需求调整为用户外键
player_name = models.CharField(max_length=50, verbose_name="玩家名称")
# 游戏分数值
score = models.IntegerField(verbose_name="游戏分数")
# 分数提交时间，自动记录创建时间
created_at = models.DateTimeField(auto_now_add=True, verbose_name="提交时间")
class Meta:
verbose_name = "游戏分数"
verbose_name_plural = "游戏分数"
# 按分数降序排列，方便后续查询排行榜
ordering = ["-score"]
def __str__(self):
return f"{self.player_name} - {self.score}"
定义完成后执行数据库迁移命令，生成对应的数据表：
python manage.py makemigrations python manage.py migrate
前端JavaScript分数提交实现
假设我们的游戏在JavaScript端已经计算出了最终分数，接下来需要通过AJAX将分数发送到Django后端。这里使用原生JavaScript的fetch API实现请求发送，避免依赖第三方库。
分数提交代码实现
首先获取游戏分数和玩家名称，然后构造AJAX请求：
// 假设游戏结束后得到的最终分数
let finalScore = 980;
// 获取玩家名称，实际场景可以从登录信息或输入框获取
let playerName = "test_player";
// 构造提交数据
let postData = {
player_name: playerName,
score: finalScore
};
// 发送AJAX请求到Django后端接口
fetch("/api/submit_score/", {
method: "POST",
headers: {
"Content-Type": "application/json",
// 如果Django开启了CSRF保护，需要携带CSRF令牌，这里从cookie中获取
"X-CSRFToken": getCookie("csrftoken")
},
body: JSON.stringify(postData)
})
.then(response => {
if (!response.ok) {
throw new Error("请求失败，状态码：" + response.status);
}
return response.json();
})
.then(data => {
if (data.code === 200) {
console.log("分数提交成功");
} else {
console.log("分数提交失败：" + data.message);
}
})
.catch(error => {
console.error("提交过程出现错误：", error);
});
// 从cookie中获取CSRF令牌的辅助函数
function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== "") {
let cookies = document.cookie.split(";");
for (let i = 0; i < cookies.length; i++) {
let cookie = cookies[i].trim();
if (cookie.substring(0, name.length + 1) === (name + "=")) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
Django后端接口处理实现
后端需要接收前端发送的AJAX请求，解析请求数据并存入之前定义的GameScore模型中。首先需要在urls.py中配置对应的接口路由。
配置路由
在应用的urls.py中添加接口路由：
from django.urls import path
from . import views
urlpatterns = [
path("api/submit_score/", views.submit_score, name="submit_score"),
]
编写视图处理逻辑
在应用的views.py中实现分数提交的视图函数，处理POST请求并校验数据：
import json
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_protect
from .models import GameScore
# 如果使用了csrf_protect装饰器，需要确保请求携带正确的CSRF令牌
@csrf_protect
def submit_score(request):
# 仅处理POST请求
if request.method != "POST":
return JsonResponse({"code": 400, "message": "仅支持POST请求"})
try:
# 解析请求体中的JSON数据
data = json.loads(request.body.decode("utf-8"))
player_name = data.get("player_name")
score = data.get("score")
# 数据校验
if not player_name or not isinstance(player_name, str):
return JsonResponse({"code": 400, "message": "玩家名称不能为空且必须为字符串"})
if not isinstance(score, int) or score < 0:
return JsonResponse({"code": 400, "message": "分数必须为非负整数"})
# 创建分数记录并保存到数据库
GameScore.objects.create(
player_name=player_name,
score=score
)
return JsonResponse({"code": 200, "message": "分数提交成功"})
except json.JSONDecodeError:
return JsonResponse({"code": 400, "message": "请求数据格式错误"})
except Exception as e:
return JsonResponse({"code": 500, "message": "服务器内部错误：" + str(e)})
常见问题与注意事项
- 如果前端和后端不在同一个域名下，需要配置Django的跨域策略，可使用django-cors-headers库快速解决跨域问题。
- 生产环境中建议对分数提交做频率限制，避免恶意刷分，可使用Django的缓存机制或第三方限流库实现。
- 如果游戏分数需要关联登录用户，可将player_name字段替换为外键关联User模型，从request.user中获取当前登录用户信息。
- 所有的用户输入数据都需要做校验，避免非法数据存入数据库，上面的视图中已经做了基础的类型和取值范围校验。
DjangoAJAXJavaScript游戏分数存储修改时间：2026-07-09 18:48:24