Flask开发井字棋时如何通过按钮onclick事件触发后端Python函数

修改后的可运行代码如下：

from flask import Flask, request, redirect, url_for

squares = [
    ['', '', ''],
    ['', '', ''],
    ['', '', '']
]
turn = 'X'

app = Flask(__name__)

# 新增处理落子的后端接口
@app.route('/move')
def handle_move():
    global turn, squares
    # 从请求参数中读取点击格子的行、列信息
    row = int(request.args.get('row'))
    col = int(request.args.get('col'))
    # 原落子逻辑
    if squares[row][col] == '':
        temp_turn = turn
        turn = 'O' if turn == 'X' else 'X'
        squares[row][col] = temp_turn
    # 处理完成后跳转回棋盘页面，刷新状态
    return redirect(url_for('tic_tac_toe'))

@app.route('/games/tic-tac-toe')
def tic_tac_toe():
    global squares, turn
    table = ('<!DOCTYPE html>\n'
             '<html>\n'
             '<head>\n'
             '<style>\n'
             '.square {\n'
             '  height: 55px;\n'
             '  width: 55px;\n'
             '  background-color: #ffffff;\n'
             '  border-style: solid;\n'
             '  border-color: black;\n'
             '  border-width: 4px;\n'
             '  text-align:center;\n'
             '  font-size:43px\n'
             '}\n'
             '.grid {\n'
             '  display: grid;\n'
             '  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));\n'
             '}\n'
             '</style>\n'
             '</head>\n'
             '<body>\n'
             '\n'
             '<div class="grid">\n'
             f' <button class="square" onclick="window.location.href=\'/move?row=0&col=0\'" id="s1">{squares[0][0]}</button>\n'
             f' <button class="square" onclick="window.location.href=\'/move?row=0&col=1\'" id="s2">{squares[0][1]}</button>\n'
             f' <button class="square" onclick="window.location.href=\'/move?row=0&col=2\'" id="s3">{squares[0][2]}</button>\n'
             '</div>\n'
             '<div class="grid">\n'
             f' <button class="square" onclick="window.location.href=\'/move?row=1&col=0\'" id="s4">{squares[1][0]}</button>\n'
             f' <button class="square" onclick="window.location.href=\'/move?row=1&col=1\'" id="s5">{squares[1][1]}</button>\n'
             f' <button class="square" onclick="window.location.href=\'/move?row=1&col=2\'" id="s6">{squares[1][2]}</button>\n'
             '</div>\n'
             '<div class="grid">\n'
             f' <button class="square" onclick="window.location.href=\'/move?row=2&col=0\'" id="s7">{squares[2][0]}</button>\n'
             f' <button class="square" onclick="window.location.href=\'/move?row=2&col=1\'" id="s8">{squares[2][1]}</button>\n'
             f' <button class="square" onclick="window.location.href=\'/move?row=2&col=2\'" id="s9">{squares[2][2]}</button>\n'
             '</div>\n'
             '\n'
             '</body>\n'
             '</html> \n')
    return table

if __name__ == '__main__':
    app.run(debug=True)

核心修改点：

• 新增/move后端接口作为前后端交互入口，接收前端传递的格子坐标参数执行落子逻辑，处理完成后跳转回棋盘页刷新状态
• 按钮onclick属性替换为JS跳转逻辑，点击时携带对应格子的行、列参数请求后端接口
• 补充if __name__ == '__main__'入口判断，规避服务重复启动的异常问题

注意：当前代码使用全局变量存储棋局状态，所有访问服务的用户会共用同一份棋盘数据，如果需要每个用户拥有独立棋局，后续可以使用Flask的session存储每个用户专属的棋盘与回合信息。

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