Question

我有一个可以使用“玩家A”和“玩家B”名称的表格。一旦用户单击“开始游戏”，游戏就会开始（已实现为烧瓶路线/玩家）。但是，单击“开始游戏”后，我也希望用玩家名称更新“玩家文本”。到目前为止，这是我的尝试，但是没有用。我的d3.click无法识别该事件。有两种方法都可以做到吗？谢谢。

index.html：

<div>
<form method="POST" action="/players" role="form", name="playerform">
    <div class="form-group">
        <label for="playerA">Player A</label>
        <input type="text" class="form-control" id="playerA" name="playerA" placeholder="Player A">
    </div>
    <div class="form-group">
        <label for="playerB">Player B</label>
        <input type="text" class="form-control" id="playerB" name="playerB" placeholder="Player B">
   </div>
   <input type="submit" id="playerform" name="playerform" value="Start Game" class="btn btn-primary btn-lg">
</form>
</div>
<div id = "player-text"> </div>
<script type="text/javascript" src="../static/game.js"></script>

app.py：

@app.route("/players", methods=["GET", "POST"])
def send():
    global ds_game
    if request.method == "POST":
        playerA = request.form["playerA"]
        playerB = request.form["playerB"]
        #return jsonify({"playerA":playerA, "playerB" : playerB})
        return redirect("/index", code=302)

game.js

d3.select("#playerform")
    .on("click", function(){
        console.log("Clikecd on player form")
        d3.json("/show",($dict)=> {
            let $scores = $dict["scores"]
            let $player = $dict["player"]
            d3.select("#player_score").remove();
            d3.select("#player-text").append("div").attr("id","player_score")
            .append("p").attr("align","center").html($player)
            .append("p").attr("align","center").html($scores);
        });
    });

Answer 1

问题在于，一旦发送表单，由于使用js只是随页面一起重新加载，因此使用js收集的数据将会丢失。

您可以做的是使用flask的session对象存储要呈现的值，并将其用于在重定向路径中返回的模板中。

赞：

# ...
from flask import session

# Session needs SECRET_KEY to be set
app.config['SECRET_KEY'] = 'something secure'

# ...
def send():
  # ...
  session['players'] = {
    'A': playerA,
    'B': playerB
  }

# ...
def index():
  # ...
  return render_template('template.html', players=session['players'])

您可以在模板文件中引用它们。

<!-- ... -->
<div id="player-text">
  {% if players %}
  <p>{{ players['A'] }}</p>
  <p>{{ players['B'] }}</p>
  {% endif %}
</div>

HTML格式更新烧瓶路径和DOM

1 个答案: