1

私は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}} が機能します。関数を file.js に送信する方法を知りたいのですが、これは HTML にのみリンクされ (上記の jquery のように)、内部に直接配置されるのではありません。「{{...}}」は、既に確認したように機能しません。Python のモジュールを見つけるか、AJAX を使用する必要があると思いますが、どこから始めればよいかわかりません。

4

2 に答える 2

1

答えは「AJAX」ですが、単純化された説明が正しい方向に導くのに役立つことを願っています:

ある種の JS イベント (リンクのクリック、ボタンのクリック、ゲーム内で発生するイベント) によって、非同期 (つまり、サーバーの応答を待たない) または同期 (つまり、返信を待つ) 呼び出しをトリガーする必要があります。サーバー上の Flask エンドポイント (つまり、設定したルート) とリクエスト。新しいエントリを作成している場合、それはおそらく POST 要求です。サーバーで検証し、データベースに保存します。

また、データベースに対するサーバーの動作の結果として発生したことをページに反映させたい場合は、Flask エンドポイントが JSON 応答を返す必要があります。ページ上の HTML と JS は既に生成されているため、JS の関数をイベント リスナーとしてバインドする必要があります。これにより、JSON 応答が検索され、JSON が解析され、関数に入力されたコードが実行されます。

JQuery の ajax 機能がそれをすべて行います。jQuery AJAX POST の例を次に示します。この例で PHP が使用されているかどうかは問題ではありません。Flask ビューで POST を通常どおり解析し、jsonify(data) を返します。Flask.jsonify のドキュメントを参照してください。

于 2013-02-17T23:55:11.523 に答える
0

AJAXを使用する必要があります。サーバー側では、JSON形式でデータを返すURLが必要です。クライアント側では、AJAXリクエストにjQueryを使用することをお勧めします。jQueryを使用してサーバーにデータを要求し、データをDOMにレンダリングするだけです。

于 2013-02-17T21:15:53.740 に答える