Question

当我访问我的页面根目录时，我的名单会生成一个基本的jinja模板，其中包含以下元素：

<div><span id="var_1">{{ var1|safe }}</span></div>
<div><span id="var_2">{{ var2|safe }}</span></div>
<div><span id="var_3">{{ var3|safe }}</span></div>

在这个模板中，我有下拉菜单，使用Ajax POSTS它们的值，然后我从烧瓶中检索它们进行一些计算。

function submitValues(val) {
    var entry1 = $('#dropdown1').val(); 
    $.ajax({
    type: "POST",
    url: "/getData",
    data: {entry2_id: val, entry1_id: entry1},
    success: function(data){
    }
    });
}

完成计算后，如何将变量传递回ajax，以使用新计算的＆＃39;更新基本模板中的3个元素。变量

在烧瓶中：

@app.route("/getData", methods=['POST'])
def getData():
    entry2Value = request.form['entry2_id']
    entry1Value = request.form['entry1_id']

    #### DO CALCULATIONS HERE WHICH GENERATES 3 NEW VALUES
    #### newVal1, newVal2, newVal3
    #### change var1, var2, var3 from the original template to these new vals
    return ??

我试图用ajax中名为flask函数的新值调用基本模板，但这并没有更新html。这些值是从ajax到函数中获得的，但我的问题是如何重新提交＆＃39;将这些值放入基础模板甚至，从头开始重新渲染模板。

我可以拨打＆＃39;计算＆＃39;烧瓶功能由ajax中的get（）成功＆＃39;像这样：

function submitValues(val) {
    var entry1 = $('#dropdown1').val(); 
    $.ajax({
    type: "POST",
    url: "/getData",
    data: {entry2_id: val, entry1_id: entry1},
    success: function(data){
        $.get("/getData", function(newvar1, newvar2, newvar3)){
        }
    }
    });
}

然后将id替换为新变量？

谢谢！

Answer 1

最简单的方法是让你的Flask路由返回一个JSON对象，这样你的ajax函数就可以使用这个返回的数据。

下面是一个说明这个概念的工作示例：

<强> app.py

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def app_home():
    return render_template("index.html", variable_here = 100)

@app.route("/getData", methods=['GET'])
def getData():

    entry2Value = request.args.get('entry2_id')
    entry1Value = request.args.get('entry1_id')

    var1 = int(entry2Value) + int(entry1Value)
    var2 = 10
    var3 = 15

    return jsonify({ 'var1': var1, 'var2': var2, 'var3': var3 })

app.run(debug=True)

<强>模板/ index.html中

<html>
<body>

Hello world! <br />

<span id="varID">{{ variable_here }}</span>

<br />

<button id="submit">Submit</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>


$(document).ready(function() {

 $("#submit").click(function() {

    var val = 1;
    var entry1 = 3;

    $.getJSON({
    url: "/getData",
    data: { entry2_id: val, entry1_id: entry1 },
    success: function(data){
        $("#varID").html(data.var1);
    }
    });

 });

});

</script>

</body>
</html>

Answer 2

尝试使用json格式的响应从flask返回到ajax get请求

将变量从Flask传递回Ajax

2 个答案: