您好:我是编程新手，所以这个问题可能是微不足道的。
我编写了一个骰子游戏(称为 10,000)来自学 Python。我现在想制作一个简单的 Web 应用程序，重用一些 Python 代码。我正在使用 Flask 框架(+ Pythonanywhere 作为我的网络开发人员)。我能够将一个简单的 CSS 网格与 CSS 样式表放在一起，并插入几个 JS 按钮和一些 HTML 对象。我向按钮添加了一个 Jquery GET 请求，以从 python 代码中获取一些值。到目前为止，一切都很好。
当我单击按钮时，网格会重复(即页面上的所有内容都会出现两次)；而且，奇怪的是，似乎只有一个按钮可以工作并返回随机值。
现在我不确定我做错了什么。我没有看到开发人员工具中弹出任何错误，并且我看到屏幕上出现随机数。你能帮我找出我搞砸的地方吗？
我的 flask 应用程序:
import random
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/')
def hello():
data = random.randint(1,6)
if request.method == "GET":
return render_template('main.html',data=data)
if __name__ == '__main__':
app.run()
HTML 模板:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to- fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" linkhref="/static/css/styles.css">
</head>
<body>
<div class="grid">
<div class="title">
<h1>10,000</h1>
</div>
<div class="dice">
<div class="card" id="card1">
<p>{{ data }}</p>
</div>
</div>
<div class="roll">
<div class="round-button" id="roll-button">
<div class="round-button-circle">
<a class="round-button">Save</a>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(function() {
$('#roll-button').click(function() {
$.get('/', function(data){
var data = data;
document.getElementById("card1").innerHTML = data;
});
});
});
</script>
最佳答案
在应用程序中，您需要添加对ajax的检查，并返回json:
from flask import Flask, render_template, request, jsonify
# add jsonfy to ipmport ^^^^^^^
def hello():
data = random.randint(1, 6)
# add next two line
if request.is_xhr:
return jsonify(data=data)
if request.method == "GET":
return render_template('main.html', data=data)
在html中使用data.data
document.getElementById("card1").innerHTML = data.data
<!-- ^^^^^^ -->
关于javascript - 我在 Flask 应用程序中使用 $.(get) 请求时遇到的 JavaScript 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46268695/