从 Facebook 上的 JavaScript 文件 (melonJS) 游戏调用 Python 函数 (Flask)答案

【问题标题】：Call Python function (Flask) from JavaScript file (melonJS) game on Facebook从 Facebook 上的 JavaScript 文件 (melonJS) 游戏调用 Python 函数 (Flask)
【发布时间】：2013-02-17 15:25:11
【问题描述】：

我浏览了有关 stackoverflow、github、Google 等的许多主题......并找到了许多不同的答案，尽管没有简单的答案。

我正在用 JavaScript 编写一个 Facebook 游戏（使用 melonJS 引擎）。框架是 Flask (Python)。

我想要做的是能够在 Python 和 JS 代码之间发送数据而无需刷新页面（如数据库操作、电子邮件发送等）。我希望用户只是看到游戏、选择选项、玩游戏，剩下的事情由游戏完成。

虽然我已经设法看到类似下面的东西会起作用：

app.py

def add(f,l,a):
    g.db.execute('insert into persons (fname,lname,age) values (?, ?, ?)',
            [f,l,a])
    g.db.commit()

@app.route('/')
def index():
    cur = g.db.execute('select fname, lname, age from persons order by id desc')
    entries = [dict(fname=row[0], lname=row[1], age=row[2]) for row in cur.fetchall()]
return render_template('app.html',entries=entries,addtodb=add)

app.html

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>THE GAME</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="generator" content="Geany 1.22" />

    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
    var adddb = '{{addtodb('Anne','Monk','12')}}';
    </script>

</head>

<body>
{{addtodb('Allie','Monk','78')}}
<ul class=entries>
        {% for entry in entries %}
            <li><h2>{{ entry.fname }} {{ entry.lname|safe }} </h2> Age: {{ entry.age }}</li>
        {% else %}
            <li><em>Unbelievable. No entries here so far</em></li>
        {% endfor %}
</ul>
</body>

</html>

{{addtodb}} 都可以工作。我只是想知道如何将函数发送到仅链接到 HTML 的 file.js（如上面的 jquery），而不是直接放在里面。正如我已经检查过的那样，“{{...}}”将不起作用。我想我必须找到一些 Python 模块或使用 AJAX，除非我不知道从哪里开始。

【问题讨论】：

标签： javascript python facebook flask

【解决方案1】：

答案是“AJAX”，但希望一些简化的阐述能帮助您指明正确的方向：

您需要使某种 JS 事件（单击链接、单击按钮、游戏中触发的事件）触发异步（即不等待服务器响应）或同步（即等待回音） ) 通过请求调用服务器上的 Flask 端点（即您设置的路由）。如果您正在创建一个新条目，那可能是一个 POST 请求。在服务器上验证并保存到数据库中。

如果您还希望页面反映由于服务器对数据库的行为而发生的任何事情，您的 Flask 端点需要返回 JSON 响应。由于您已经生成了页面上的 HTML 和 JS，因此需要将 JS 中的函数绑定为事件侦听器，以便它查找 JSON 响应，然后解析 JSON 并执行您放入函数中的任何代码。

JQuery 的 ajax 功能为您完成了这一切。 Here is an example of a jQuery AJAX POST。示例使用 PHP 没关系；您通常在 Flask 视图中解析 POST 并返回 jsonify(data)。 See docs on Flask.jsonify.

【讨论】：

非常感谢您的回答。在您的帮助和其他一些帖子的帮助下，我开始尝试解决这个问题，但我遇到了 Flask 的问题。我应该将带有功能代码的文件放在项目文件夹中的哪个位置？因为当我将函数放在主文件夹的 test.py 中并放入 'url:test.py' 时，它总是在 localhost:5000/test.py 中搜索文件（我使用 foreman 进行测试）。我总是得到 404 - Not Found。我的 .js 文件位于 /static 文件夹中。
Flask 构建在 Werkzeug 之上，作为“网关”工作。这不像写一次性的脚本。您正在创建一个 Flask 应用程序，它会听到浏览器的请求并决定要做什么。因此，当您像这样指向 test.py 时，什么都没有发生，因为那里没有提供任何文件。您需要创建一个route 并指向它。你真的应该阅读整个 quickstart，最好是阅读整个 Flask 文档。这不像写脚本。
感谢您的所有帮助。我终于找到了解决方案，可以继续我的工作了。 :)

【解决方案2】：

您必须使用 AJAX。在服务器端，您只需要一个以 JSON 形式返回数据的 URL。在客户端，我建议您使用 jQuery 处理 AJAX 请求。只需使用 jQuery 从服务器请求数据并将数据渲染到 DOM 中。

【讨论】：