dte*_*ter 5 javascript python ajax jquery 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 ??
我试图在名为flask 函数的ajax 中使用新值调用基本模板，但这不会更新html。这些值是从 ajax 获取到函数中的，但我的问题是如何将这些值“重新提交”到基本模板中，甚至从头开始重新呈现模板。
我可以通过 ajax 'success' 中的 get() 调用'计算'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 函数就可以使用这个返回的数据。
下面是一个说明这个概念的工作示例：
应用程序
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>
| 归档时间： |
|
| 查看次数： |
10683 次 |
| 最近记录： |