1

これはここでの最初の質問なので、何か見逃していたら教えてください;)

Pythonコードを実行して特定の問題を解決し、結果を数値とプロットとして表示するWebサイトを構築しています(すべて同じページに)。Pythonコードを実行する前にパラメーターを操作して視覚化するには、最初にフォームデータをhtmlからフラスコに送信する必要があるため、ajaxを介してこれを実行できると考えました-以前に標準で結果をプロットしたようにmpld3の例に基づくパラメーター。

まず、html /form 側 (コメントを探します):

<div class="row">
    <div class="col-md-8">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Context Plots</h3>
            </div>
            <div class="panel-body overflow">
                <div calss="loading-div" id="context_loading_div">
                    <div class="loading-tag">
                        <i class="fa fa-cog fa-spin"></i>
                    </div>
                </div>
                <div class="plot" id="context_plot_container"></div>
                <!-- ### plot script here ### -->
                <script src="{{ url_for('static', filename='js/solver_context.js') }}" type="text/javascript">
                </script>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Context Parameters</h3>
            </div>
            <div class="panel-body">
                <form action="" method="post" class="form-horizontal">
                    <div class="form-group">
                        <label for="buy_upper" class="col-sm-6 control-label" title="Utility buying price low tariff">Buying high [CHF]</label>
                        <div class="col-sm-6 input-group">
                            <span class="input-group-addon"><i class="fa fa-usd"></i></span>
                            <--! ### form element to fetch data from here ### -->
                            <--! the jinja templating stuff here works fine -->
                            <input type="range" name="buy_upper" class="form-control" id="buy_upper" min="0.05" max="1.0" step="0.01" value={% if reqMeth == 'POST' %}{{ request.form['buy_upper'] }} {% else %}"0.22"{% endif %} />
                        </div>
                        <--! some more form elements -->
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

次に、javascript/ ajax側:

$(window).load(function() {
    $("#context_plot_container").hide();
    $("#context_loading_div").show();
    var buy_upper = document.getElementById("buy_upper").value;
    var buy_lower = document.getElementById("buy_lower").value;
    var sell_upper = document.getElementById("sell_upper").value;
    var sell_lower = document.getElementById("sell_lower").value;
    var qu = {"buy_upper": buy_upper, "buy_lower": buy_lower, "sell_upper": sell_upper, "sell_lower": sell_lower};
    $.ajax({
        type: "POST",
        async: true,
        contentType: "application/json; charset=utf-8",
        url: "/context_plot",
        data: JSON.stringify(qu),
        success: function (data) {     
            var graph = $("#context_plot_container");
            graph.html(data);
            $("#context_plot_container").show();
            $("#context_loading_div").hide();
        },
        dataType: "html"
    });
});

このスクリプトは、更新ボタンを押した後に実行されるはずですが、今のところ、ページの残りの部分と同時にロードしています。私はjavascript/jquery/ajaxを初めて使用するので、上記のmpld3の例を多かれ少なかれコピーしました。

最後に、python/フラスコ側:

## plot routes
@app.route('/context_plot', methods=['GET', 'POST'])
def context_plot():
    import numpy as np
    plt.close(); # (opened above - works fine in the results plot)

    # check params
    # try:
    buy_upper = float(request.args.get('buy_upper'));
    buy_lower = float(request.args.get('buy_lower'));
    sell_upper = -float(request.args.get('sell_upper'));
    sell_lower = -float(request.args.get('sell_lower'));
    # except:
    #     buy_lower = 0.19;
    #     buy_upper = 0.29;
    #     sell_lower = -0.09;
    #     sell_upper = -0.09;

    # data
    up = np.array([buy_lower] * 28 + [buy_upper] * 52 + [buy_lower] * 16);
    urp = np.array([sell_lower] * 28 + [sell_upper] * 52 + [sell_lower] * 16);

    # time vector
    t = np.arange(0, len(up) - 1, 1 / 96.0)[:len(up)];

    # figure
    fig, (ax1, ax2) = plt.subplots(2, 1, figsize = (9, 6), sharex = 'col');
    # subplot 1
    ax1.grid(True, alpha = 0.5);
    ax1.set_ylabel('costs [CHF/kWh]');
    ax1.set_title('Utility profiles');
    ax1.plot(t, up, t, urp, 'k');
    ax1.margins(y = 0.1);
    leg = ax1.legend(['buying', 'selling'], loc = 'upper left', framealpha = 0);
    leg.set_title(''); # workaround for "None" at the bottom left
    # subplot 2
    ax2.grid(True, alpha = 0.5);
    ax2.plot(t, urp);
    ax2.margins(y = 0.1);

    plugins.connect(fig, plugins.MousePosition(fontsize=12));

    return mpld3.fig_to_html(fig); # (works fine in the results plot)

すべてを実行しようとすると、図が表示されません。そして、Firefox のネットワーク検査ツール (「応答」部分) を見ると、Werkzeugs のデバッガーが次のように言っていることがわかります。

File "X:\...\opt.py", line 84, in context_plot
    sell_upper = -1 * request.args.get('sell_upper');
TypeError: unsupported operand type(s) for *: 'int' and 'NoneType'

（ここから）

したがって、クエリ文字列に「sell_upper」がないと解釈しています。次に、もう一度、Firefox のネットワーク検査ツール (「Params」部分) を確認すると、次のように表示されます。

{"buy_upper":"0.99","buy_lower":"0.18","sell_upper":"0.27","sell_lower":"0.16"}

quまた、引用符の代わりに使用したり、引用符を取り除いたりして、パラメーターが渡される方法をいじってみJSON.stringify(qu)ました...そして、私はそれを正しく理解していないようです。

したがって、問題は、クエリ文字列がまだ不正な形式であるか、ajax を介してルートを呼び出すときに request.args.get() が期待どおりに機能しないことであると思います...またはまったく別のもの-.-

4

1 に答える 1

1

AJAX を使用して POST 要求を実行していますが、Flask で GET 要求パラメーターにアクセスしています (それらは URL のクエリ部分にあり、 で始まります?)。リクエスト オブジェクト ドキュメントを参照してください 。

form代わりに属性を使用する必要があります。

 var = request.form.get('sell_upper')

応答をキャッシュすることができ、実際にはサーバー上で計算以外は何も実行しない場合は、AJAX で GET 要求を使用して、Python コードをそのままにしておくこともできます。

于 2015-01-18T17:15:28.453 に答える