从我的网页访问 Flask 服务器

Question

这是从这个问题here继续的问题。

我正在尝试使用我网页上的图像按钮来控制伺服电机。我的伺服控制器采用 python 脚本 (cameraservo2.py) 的形式，我使用 jQuery 将 post 数据传递给 python 函数。我从询问“如何从网页运行 python 脚本”得到的结论是使用“Flask”，这对我来说是全新的。但是我只使用pip install Flask 成功安装了它。 （如果我错过了什么，请告诉我？）

我的index.html, cameraservo3.py and routes.py 在我的/var/www文件夹中。我的网络服务器默认运行，我可以通过我的 Raspberry Pi IP 地址从另一台网络计算机访问它。

这是我的routes.py 代码：

from flask import Flask, jsonify, render_template, request
from cameraservo3 import turnCamera

app = Flask(__name__)

@app.route('/turn_servo', methods=['POST'])
def turn_servo_ajax():
    direction = request.form['direction']
    cam_result = turnCamera(direction=direction)
    return '<div> {} </div>'.format(cam_result)   

if __name__ == '__main__':
    app.debug = True
    app.run(host='0.0.0.0')

我在 index.html 中的部分 jQuery 脚本：

$('#left_button').click(function(){
            $.post("/turn_servo", {direction:"left"}).done(function (reply) {
                $('#camerapos').empty().append(reply);
                alert("left button clicked");});

        });

我的 html 的一部分：

<div id="control_button">
    <img src="button_left.png" id="left_button" height="50" width="50">
    <img src="button_right.png" id="right_button" height="50" width="50">
    <p id="camerapos"> test </p>
  </div>

cameraservo2.py 可以在my question 的答案中找到。我运行python routes.py 它给了我

 * Running on http://0.0.0.0:5000/
 * Restarting with reloader

但是当我单击 left_button 时，脚本 (cameraservo2.py) 没有被执行。怎么了？我做错了哪一部分？？

Flask 的快速入门指南也不是很有帮助。 ：/

Answer 1

除非您从相同的主机和端口号提供index.html 文件，否则您将遇到same-origin policy 限制。将index.html 页面也添加到您的 Flask 服务器是最简单的。

添加一个 / 路由，该路由为将执行 AJAX 发布的页面提供服务。您可以使用模板在此处填写$.post() 的路线。如果使用 Jinja2 作为模板，那就是：

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

以及 Flask 项目的 templates 子目录中的文件 index.html：

$('#left_button').click(function(){
        $.post("{{ url_for('turn_servo_ajax') }}", {direction:"left"}).done(function (reply) {
            $('#camerapos').empty().append(reply);
            alert("left button clicked");});

    });

其中{{ }} 部分是Jinja2 模板语法，url_for() 返回turn_servo_ajax 视图函数的完整URL。