从我的网页访问Flask服务器

Question

这是一个接着之前问题的提问，详细内容可以在这里找到。

我想通过网页上的图片按钮来控制一个伺服电机。我的伺服控制器是一个Python脚本（cameraservo2.py），我使用jQuery来把数据发送给这个Python函数。我了解到要从网页运行Python脚本，可以使用一个叫'Flask'的东西，但这对我来说完全是新鲜事。不过，我已经成功安装了它，只用了pip install Flask这个命令。（如果我漏掉了什么，请告诉我！）

我的index.html、cameraservo3.py和routes.py都在我的/var/www文件夹里。我的网络服务器默认在运行，我可以通过我的树莓派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的内容可以在我提问的回答中找到，链接在这里。我运行了python routes.py，结果是：

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

但是当我点击左侧按钮时，脚本（cameraservo2.py）并没有执行。到底哪里出了问题？我做错了哪一部分呢？

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

Answer 1

如果你不从同一个主机和端口号提供 index.html 文件，你会遇到 同源策略 的限制。最简单的方法就是把 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() 会返回一个完整的 URL，用于 turn_servo_ajax 这个视图函数。