我正在尝试使用 Python 和 Flask 编写一个基于文本的 Pokemon 游戏。我希望用户能够通过单击网页上的按钮来选择他们的口袋妖怪，将此 user_pokemon_name 变量发送到后端，然后使用有关口袋妖怪的各种统计信息更新网页。然后游戏将继续，并显示新按钮和新消息。
我面临的问题是，一旦用户单击按钮，就会在与正文中的响应相同的 url 处加载一个新的 HTML 页面。
这是我的app.py代码：
from flask import Flask, render_template, request
app = Flask(__name__ ,
static_url_path='',
static_folder='../frontend/static',
template_folder='../frontend/templates')
@app.route("/battle")
def battle_page():
return render_template('battle.html')
@app.route("/battle", methods=['POST'])
def get_user_choice():
user_pokemon_name = request.form['userPokemonChoice']
print(user_pokemon_name)
user_choice = f"You have chosen {user_pokemon_name.capitalize()}."
return user_choice
这是我的Battle.html代码：
<body>
<section id= "userPokemonChoice">
<p>Now, which Pokemon do you want? The three available Pokemon are Bulbasaur, Charmander, and Squirtle.</p>
<form class = "userinput" method ="POST" action="/battle" id = "form">
<button type = "submit" name = "userPokemonChoice" value="bulbasaur" id="choosePokemon" onclick="getUserChoice()">Bulbasaur</button>
<button type = "submit" name = "userPokemonChoice" value="charmander" id="choosePokemon" onclick="getUserChoice()">Charmander</button>
<button type = "submit" name = "userPokemonChoice" value="squirtle" id="choosePokemon" onclick="getUserChoice()">Squirtle</button>
</form>
</section>
<section id="stats"></section>
这是我的 Battle.js 代码
// const form = document.getElementById('form')
// form.addEventListener('submit', (e) => {
// e.preventDefault()
//
// })
function getUserChoice() {
const url = 'http://127.0.0.1:5001/battle'
fetch(url)
.then(response => response)
.then(data => {
console.log(data.text);
document.getElementById("stats").innerHTML = data
})
}
当我按原样运行代码时，会显示以下屏幕：
如果我取消注释表单事件侦听器，我会收到一个 [object Response]，我想在其中查看响应： 对象响应
任何帮助将不胜感激 - 我一直在绕圈子！
默认情况下，提交表单时会重新加载整个页面。 您注释掉的代码会阻止提交表单，以便您可以使用 Fetch 调用自行执行此操作。
Fetch 可以发送 GET 和 POST 请求。您的路线需要带有表单数据的 POST 请求。但是，您当前正在发送没有数据的 GET 请求。如果请求正确，客户端会收到响应，响应可以采用各种格式。就你而言，它是一个文本。所以收到后，必须从响应中读取文本。
以下代码应以表单形式发送按下按钮的内容，并在页面中显示接收到的文本。
/**
* battle.js
*/
const form = document.getElementById('form')
form.addEventListener('submit', function(e) {
e.preventDefault();
// Create a form with user input.
const formData = new FormData(this);
// Add the name and value of the pressed button to the form.
formData.append(e.submitter.name, e.submitter.value);
// Send a fetch request of type POST.
const url = '/battle';
fetch(url, {
method: 'post',
body: formData
})
.then(response => response.text()) // Read the response as text.
.then(data => {
console.log(data);
document.getElementById('stats').innerText = data
});
});