44

フラスコを使用するときにJavascriptファイルで動的URLを作成するための推奨される方法は何ですか？jinja2テンプレートとpythonビュー内で使用されている場合、ファイルurl_forでこれを行うための推奨される方法は何ですか？.jsテンプレートエンジンによって解釈されないため。

基本的にやりたいことは：

// in comments.js
$.post(url_for('comment.comment_reply'));

これは不可能です。

しかし当然、私はそれをテンプレートで実行することができます：

<script>
    $.post(url_for('comment.comment_reply'));
</script>
4

9 に答える 9

39

@dumbmatterの提案は、事実上の標準的な方法とほとんど見なされています。しかし、私はそれを行うためのより良い方法があるだろうと思いました。だから私はこのプラグインを開発することができました：Flask-JSGlue。

を追加{{ JSGlue.include() }}した後、ソースコードで次のことを行うことができます。

<script>
    $.post(Flask.url_for('comment.comment_reply', {article_id: 3}));
</script>

また：

<script>
    location.href = Flask.url_for('index', {});
</script>
于 2015-01-05T17:25:05.270 に答える
16

Flaskのドキュメントurl_forでは、HTMLファイルで使用して、他の場所からアクセスできるルートURLを含む変数を設定することを提案しています。次に、その上にビューURLを手動で作成する必要がありますが、ルートURLと同様に保存できると思います。

于 2012-04-26T14:38:27.087 に答える
7

解決策を探していたとき、彼らはこの解決策を思いつきました。

  • アドオンは必要ありません

  • ハードコーディングされたURLはありません

重要なのはJinja2、JavaScriptをすぐにレンダリングできる機能があることを理解することです。

テンプレートフォルダを次のように設定します。

/template
    /html
        /index.html
    /js
        /index.js

あなたのviews.pyで

@app.route("/index_js")
def index_js():
    render_template("/js/index.js")

これで、静的フォルダーからjavascriptを提供する代わりに。次を使用します：

<script src="{{ url_for('index_js') }}"></script>

結局のところ、JavaScriptをその場で生成しているので、静的ファイルではなくなります。

これで、javascriptファイル内で、他のファイルurl_forと同じようにを使用できhtmlます。

たとえばJquery、Ajaxリクエストを行うために使用します

$.ajax({
  url: {{ url_for('endpoint_to_resource') }},
  method: "GET",
  success: call_back()
})
于 2015-10-23T23:13:54.480 に答える
3

@jeremyの答えは正しく、おそらくより一般的なアプローチですが、別の答えとして、コメントで提案されている正確なurl-route-map-to-javascript変換を行うと主張するflask拡張機能dantezhuを作成して公開したことに注意してください。

于 2012-11-29T16:04:07.447 に答える
2

私はこの汚くて醜いトリックを使います：

"{{url_for('mypage', name=metadata.name,scale=93,group=2)}}"
.replace('93/group',scale+'/group')

ここscaleで、AJAXリクエストに使用するjavascript変数はあります。したがって、url_forはURLを生成し、JavaScriptは実行時にパラメーターを置き換えます。生成されるコードは次のようなものです。

"/ajaxservive/mynam/scale/93/group/2".replace('93/group',scale+'/group')

これはかなり奇妙ですが、それでもよりエレガントな解決策を見つけることはできません。

実際、リンクされたフラスコ拡張のコードを見ると、同じことを行いますが、一般的なケースを管理します。

于 2013-03-07T10:53:28.740 に答える
1

私の場合、動的にURLを作成しようとしていました

私は次のように問題を解決しました（注：Angularの構文を{[x]}に交換しました：

<ul>
    <li ng-repeat="x in projects">
        {[x.title]}
        {% set url = url_for('static',filename="img/") %}

        <img src="{{url}}{[x.img]}">
    </li>
</ul>
于 2015-04-26T00:47:54.580 に答える
0

Jinja2とFlaskで「tojson」を使用することで、動的に作成されたURLルートをjavascript関数に渡すことができました。

動的URLをhtmlテンプレートからjsに渡すには、jinjaステートメントの最後に「| tojson」を追加して、適切な形式に変換します。

それ以外の：

<script>
 $.post(url_for('comment.comment_reply'));
</script>

試す：

<script>
 var route = {{ url_for('comment.comment_reply')|tojson }};
 yourJavaScriptFunction(route);
</script>

そうすれば、js関数のルートを必要なものの正しいルートとして使用できるようになります。

yourJavaScriptFunction(route){
 console.log(route);
}
于 2021-11-23T20:16:44.393 に答える
-2

ボタンが押されたときにFLASKルートを呼び出そうとしていました。応答を収集し、divを更新する必要があります。ページをリロードしないでください。

これを行うためにjqueryを使用しました。

コードは次のとおりです。

@app.route('/<name>')
def getContent(name):
    return 'This is %s' % name

HTML：

    <div id="mySpace" class="my-3">Count</div>

    <button id="next_id" class="btn btn-primary">Press</button>

    <script>
        $('#next_id').click(function (){
            $.get('/aroy', function(data, status){
            $('#mySpace').html(data);
        });
        });
    </script>
于 2018-08-14T11:03:20.117 に答える
-3

私はこれを提案します：

<script src="{{ url_for('static', filename='js/jquery.js') }}" type="text/javascript">
</script>

私にとってはうまくいく

于 2016-09-09T10:16:14.437 に答える