在Flask中实现AJAX交互JSON数据，你可以使用jQuery来简化客户端的代码。以下是一个简单的例子：
首先，设置一个Flask路由来处理AJAX请求并返回JSON数据：
from flask import Flask, request, jsonify
app = Flask(__name__)
@app.route('/get_data', methods=['POST'])
def get_data():
# 假设我们需要从前端接收一个名为 'param' 的参数
param = request.json.get('param')
# 根据接收到的参数处理数据，并构造返回的数据字典
response_data = {'message': 'Received param: ' + str(param)}
return jsonify(response_data)
if __name__ == '__main__':
app.run(debug=True)
然后，使用jQuery发送AJAX请求并处理返回的JSON数据：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX Example</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("#ajax_button").click(function(){
var data = {
param: 'example'
};
$.ajax({
type: 'POST',
url: '/get_data',
contentType: 'application/json',
data: JSON.stringify(data),
success: function(response) {
console.log(response);
// 处理返回的JSON数据
$('#result').text(response.message);
},
error: function(xhr, status, error) {
console.error(error);
}
});
});
});
</script>
</head>
<body>
<button id="ajax_button">Send AJAX Request</button>
<div id="result"></div>
</body>
</html>
在这个例子中，当按钮被点击时，它会发送一个AJAX POST请求到/get_data路由，并附带一个名为param的JSON参数。Flask路由会处理这个请求，并返回一个JSON响应。然后，jQuery的success回调函数会处理这个响应，并更新页面上的元素。