AJAX和jQuery动态加载数据的实现方法

<script src="/UploadFiles/2021-04-02/{{ url_for('static', filename='jquery.js') }}">

或是从CDN加载（你可能需要更换其他站点提供的CDN资源）：


<script src="/UploadFiles/2021-04-02/jquery.min.js">

2、设置url变量
在jQuery里没法使用url_for函数获取地址，所以我们使用request设置一个动态的全局变量：


<script type=text/javascript>
$SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
</script>


两个输入框，一个按钮：


<h1>Add Two Number</h1>
<p>
<input type="text" size="5" name="a"> +
<input type="text" size="5" name="b"> =
<span id="result">"calculate">Calculate!</button>


3、使用getJSON方法发送和获取数据


<script type=text/javascript>
$(function() {
$('a#calculate').bind('click', function() {
$.getJSON($SCRIPT_ROOT + '/calculate', {
a: $('input[name="a"]').val(),
b: $('input[name="b"]').val()
}, function(data) {
$("#result").text(data.result);
});
return false;
});
});
</script>


$.getJSON(url, data, func)发送一个GET请求，其中url是你要处理数据的视图函数的url，data是返回的数据，func是处理数据的函数。
JSON是JavaScript Object Notation（JavaScript对象表示法）的缩写，一种数据格式，形态上类似Python的字典，以键值对的形式存储数据（符号也是大括号）。
4、获取、处理并返回JSON数据的视图函数


from flask import Flask, jsonify, render_template, request
app = Flask(__name__)
@app.route('/calculate')
def add_numbers():
a = request.args.get('a', 0, type=int) # 第二个参数作为默认值
b = request.args.get('b', 0, type=int)
return jsonify(result=a + b)
@app.route('/')
def index():
return render_template('index.html')


使用Flask提供的jsonify()函数返回JSON数据。
这个例子改编自Flask官方的例子，完整的源码见：https://github.com/pallets/flask/blob/master/examples/jqueryexample