将变量从Flask传递回Ajax

Passing variables from Flask back to Ajax

本文关键字：Ajax Flask 变量      更新时间：2024-06-16

当我访问我的页面根时，我的flask会生成一个包含元素的基本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发布它们的值，然后从烧瓶中检索它们来进行一些计算。

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

完成计算后，如何将变量传递回ajax，以使用新的"计算"变量更新基本模板中的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中获取到函数中的，但我的问题是如何将这些值"重新提交"到基本模板中，甚至从头开始重新渲染模板。

我可以通过ajax中的get（）调用"calculation"flask函数吗

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元素？

谢谢！

最简单的方法是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)

templates/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>

尝试这样做，而不是以json格式从flask返回到ajax获取请求

相关文章：