javascript - 使用Flask return修改网页

Question

我有最简单的 flask 应用程序:

app = Flask(__name__)
@app.route('/python/', methods = ['GET','POST'])
def index():
    return "Hello World"
if __name__ == "__main__":
    app.run(debug=True)

以及一个非常简单的网页，带有文本区域和按钮。

<textarea id="mytextarea">Some text...</textarea>
<p> Click the button </p>
<button type="button" onclick="myFunction()"> Click here</button>
<p id="demo"> </p>

我想要做的是，当单击按钮时，使用脚本将 Flask 的响应放在网页上。我尝试了以下方法，但它不起作用。当我点击按钮时什么也没有发生。我做错了什么？

<script>
function myFunction() {
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "http://127.0.0.1:5000/python/", true);
xhttp.send();
var x = xttp.response;
document.getElementById("demo").innerHTML = x;
}
</script>

(我是初学者)。

Answer 1

请参阅下面的代码并查看 XMLHttpRequest.onreadystatechange详情请参阅

<script>
    function myFunction() {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (xhttp.readyState === XMLHttpRequest.DONE) {
                document.getElementById("demo").innerHTML = xhttp.responseText;
            }
        };
        xhttp.open("POST", "http://127.0.0.1:5000/python/", true);
        xhttp.send();
    }
</script>

如果您从 Flask 应用程序发送 html，则不会出现 Cors 问题，请参阅示例代码，您需要从 Flask 导入 render_template。

@app.route('/')
def hello_world():
    return render_template('index.html')