在Django中如何从JS调用Python函数？实现魔方计时器停止生成新打乱序列

1. 后端新增Scramble接口（Django） #

在views.py中添加一个专门返回随机打乱序列的API视图，用JSON格式返回数据：

from django.http import JsonResponse
from .scramble_generator import *

def home(request):
    s = scramble_replace(scramble_gen())
    scramble = sprint(valid(s))
    return render(request, 'timer/index.html', {'scramble':scramble})

# 新增API接口，供前端异步获取新打乱序列
def get_new_scramble(request):
    s = scramble_replace(scramble_gen())
    scramble = sprint(valid(s))
    return JsonResponse({'scramble': scramble})

接着在应用的urls.py中配置该接口的路由：

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home'),
    path('new-scramble/', views.get_new_scramble, name='new_scramble'),  # 新增路由
]

2. 前端修改（main.js） #

首先确保你的HTML页面中有用于显示打乱序列的元素，比如：

<div id="scramble">{{ scramble }}</div>

然后修改main.js，在计时器进入stopped状态时，自动请求新的打乱序列并更新页面：

let state = 'stopped';

const transitions = {
  waiting: state => ResetTimer(),
  started: state => StartTimer(),
  stopped: state => {
    PauseTimer();
    // 计时器停止时触发新打乱序列请求
    fetchNewScramble();
  },
};

document.addEventListener('keydown', changeState);
document.addEventListener('keyup', changeState);

function changeState({code, repeat, type: action}){
  if(code !== 'Space' || repeat){
    return;
  }

  const actions = {
    keydown: () => state === 'stopped' ? 'waiting' : 'stopped',
    keyup: () => state === 'stopped' ? state : 'started',
  };

  const next = actions[action]();
  next === state || transitions[state = next](state);
}

// 新增函数：请求新打乱序列并更新页面
function fetchNewScramble() {
  fetch('/new-scramble/')
    .then(response => response.json())
    .then(data => {
      const scrambleElement = document.getElementById('scramble');
      if (scrambleElement) {
        scrambleElement.textContent = data.scramble;
      }
    })
    .catch(error => console.error('获取新打乱序列失败:', error));
}

关键说明 #

• 后端新增的接口避免了刷新整个页面，只返回需要的打乱序列数据，提升交互流畅度。
• 前端在计时器停止的回调逻辑中触发请求，保证每次计时结束后自动更新打乱序列。
• 注意fetch的路径要和urls.py中配置的路由一致，如果应用部署在子路径下，需要调整路径前缀。

内容的提问来源于stack exchange，提问作者Timur Arazmedov