使用 Flask return 修改网页答案

【问题标题】：Using Flask return to modify a webpage使用 Flask return 修改网页
【发布时间】：2017-09-07 18:56:18
【问题描述】：

我有最简单的烧瓶应用：

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>

（我是初学者）。

【问题讨论】：

标签： javascript python flask

【解决方案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>

如果您从烧瓶应用程序发送 html，则没有 cors 问题，请参阅示例代码，您需要从烧瓶导入 render_template。

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

【讨论】：

我发现了问题所在。跨域资源共享是我所需要的。现在它起作用了。它有效！
@solitarywinter 如果您从烧瓶应用程序访问它，请参阅上面的编辑，没有交叉问题。但是如果你从其他服务器（例如端口 80）访问它，那么你将面临 cors 问题。