在Facebook上的melonJS游戏中从JavaScript文件调用Python函数（Flask）

1 投票

2 回答

6858 浏览

数据工程师

提问于 2025-04-17 16:10

我在StackOverflow、GitHub、Google等地方查了很多话题，发现了很多不同的答案，但没有一个简单明了的。

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

我想要实现的是，能够在Python和JavaScript代码之间发送数据，而不需要刷新页面（比如进行数据库操作、发送邮件等）。我希望用户只需看到游戏，选择选项，玩游戏，其他的事情游戏自己处理。

我已经发现下面的代码可以工作：

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}}也能正常工作。

我只是想知道怎么把这个函数发送到file.js中，而这个文件只链接到HTML（就像上面的jQuery那样），而不是直接放在里面。因为我已经检查过，{{...}}是不能用的。

我想我需要找一些Python的模块，或者可能需要用AJAX，但我不知道从哪里开始。

javascript ajax web development game development flask frontend-backend communication data exchange melonjs

2 个回答

你需要使用AJAX。服务器端只需要一个能返回JSON格式数据的URL。客户端我建议你用jQuery来发送AJAX请求。只需用jQuery向服务器请求数据，然后把这些数据显示到网页上。

回答于 2025-04-17 由 Python大师

分享举报

答案是“AJAX”，但我希望通过一些简单的解释能帮助你更好地理解这个概念：

你需要让某种JS事件（比如点击链接、点击按钮，或者在游戏中触发的事件）去调用服务器上的Flask接口。这种调用可以是异步的（也就是说，不用等服务器的回复就继续执行）或者同步的（也就是要等服务器回复后再继续）。如果你是在创建一个新的数据条目，那通常是一个POST请求。然后在服务器上验证这个请求，并把数据保存到数据库里。

如果你还想让页面显示服务器对数据库操作后的结果，你的Flask接口需要返回一个JSON格式的响应。因为你已经生成了页面上的HTML和JS，所以需要在JS中绑定一个函数作为事件监听器，这样它就会等待那个JSON响应，然后解析这个JSON，并执行你在函数中写的代码。

JQuery的ajax功能可以帮你完成这些工作。这里有一个jQuery AJAX POST的例子。即使这个例子使用的是PHP也没关系；在你的Flask视图中，你可以正常解析POST请求并返回jsonify(data)。查看Flask.jsonify的文档。

回答于 2025-04-17 由 Python大师

分享举报

在Facebook上的melonJS游戏中从JavaScript文件调用Python函数（Flask）

2 个回答

撰写回答