flask jquery停止刷新 [英] flask jquery to stop refresh
问题描述
我可以在此处实施本教程: https://pythonprogramming.net/jquery-flask -tutorial/
I am able to implement this tutorial here: https://pythonprogramming.net/jquery-flask-tutorial/
但是，我想对其进行扩展，并使用来自html的输入作为变量来对其进行其他代码处理.我无法像过去那样使用以下方法来获取变量:
However, I want to expand on it and use the input from the html as a variable to do other code with it. I am unable to grab the variable like i've done in the past with:
lang =request.form['proglang']
并像这样引用它以显示在html模板上:
and reference it like this to display on the html template:
<h3>You responded with: {{ lang }} </h3>
请让我知道如何从我的
@app.route('/interactive', methods=['GET', 'POST'])
完整代码html模板:
Full code html template:
{% block body %}
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type=text/javascript>
$(function() {
$('a#process_input').bind('click', function() {
$.getJSON('/background_process', {
proglang: $('input[name="proglang"]').val(),
}, function(data) {
$("#result").text(data.result);
});
return false;
});
});
</script>
</head>
<body>
<div class='container'>
<h3>Welcome! Which is the best programming language of them all?</h3>
<form>
<input type=text size=5 name=proglang>
<a href=# id=process_input><button class='btn btn-default'>Submit</button></a>
</form>
<p id=result></p>
</div>
</body>
<body>
<div class='container'>
<h3>You responded with: {{ lang }} </h3>
</div>
</body>
{% endblock %}
完整密码瓶:
from flask import Flask
from flask import render_template, url_for, request, redirect
from flask import jsonify
app = Flask(__name__)
@app.route('/interactive', methods=['GET', 'POST'])
def interactive():
try:
lang =request.form['proglang']
except:
lang = '1234'
return render_template('interactive_v2.html', lang=lang)
@app.route('/background_process')
def background_process():
try:
lang = request.args.get('proglang', 0, type=str)
if lang.lower() == 'python':
return jsonify(result=lang)
else:
return jsonify(result='Try again.')
except Exception as e:
return str(e)
if __name__ == '__main__':
app.run(debug=True)
推荐答案
使用ajax(在您的情况下为$ .getJSON)时，您不能使用jinja从flask引用变量.进行Ajax调用时，您正在向background_process发送请求，并且该请求返回json响应.此响应无法用Jinja(花括号)呈现，只能与javascript代码一起使用.
You cannot reference variables from flask using jinja when you use ajax ($.getJSON in your case). When you make an ajax call, you are sending a request to background_process and it returns a json response. This response cannot be rendered with Jinja (curly brackets) and can only be used with javascript code.
{{lang}}仅在加载interactive时渲染一次.当您收到来自ajax的响应时，会以json格式获取它，并且必须使用jquery来操纵或使用数据，而不是jinja的花括号
{{lang}} gets rendered only once when interactive is loaded. When you get a response from ajax, you get it in a json format and you have to use jquery to manipulate or use the data and not jinja's curly brackets
最后，一个html文档中不能包含多个<body>标签.
Lastly, you cannot have more than one <body> tag in an html document.
这是如何实现您想要的内容和正确的HTML格式
Here is how to achieve what you want and a corrected format of your HTML
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type=text/javascript>
$(function() {
$('a#process_input').bind('click', function() {
$.getJSON('/background_process', {
proglang: $('input[name="proglang"]').val(),
}, function(data) {
$("#result").text(data.result);
// ADD THE FOLLOWING LINE
$("#lang").text(data.result);
});
return false;
});
});
</script>
</head>
<body>
<div class='container'>
<h3>Welcome! Which is the best programming language of them all?</h3>
<form>
<input type=text size=5 name=proglang>
<a href=# id=process_input><button class='btn btn-default'>Submit</button></a>
</form>
<p id=result></p>
</div>
<div class='container'>
<h3>You responded with: <span id="lang">{{lang}}</span> </h3>
</div>
</body>
</html>
这篇关于flask jquery停止刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
