本文目录
1. 前言
2. 创建项目结构
3. 发起Ajax请求
4. 编写app.py
5. 接收JSON数据
6. 测试
7. 小结
1. 前言
上一篇讲了Flask接收URL参数及表单参数，其实这两种方式用的比较少了，现在还是流行通过Ajax传输JSON数据。
本篇就通过一个完整的FlaskWeb项目，演示下如何实现Flask获取Ajax传输的JSON数据。
2. 创建项目结构
使用VSCode创建项目文件夹flask-ajax-demo，结构如下：
其中app.py是Python程序，user.html是静态页面。
3. 发起Ajax请求
编写user.html，代码如下：
<!DOCTYPE html>
<html>
<body>
<input type="button" value="发送数据" onclick="btnSendData()">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function btnSendData() {
var input = {
'name': 'tom',
'password': '123456'
};
$.ajax({
url: '/addUser',
type: 'post',
contentType: 'application/json',
data: JSON.stringify(input),
success: function (res) {
console.log(res);
}
});
}
</script>
</body>
</html>
首先，我们引用了jquery，以便使用$.ajax发起Ajax请求。
然后，点击【发送数据】按钮时，发送Ajax请求，注意访问路径为/addUser，请求方式post，内容类型application/json。
重点来了，此处要将input对象转换为JSON字符串发送，所以使用JSON.stringify(input)将发送对象转换为JSON字符串。
4. 编写app.py
编写app.py启动程序，然后编写一个路由方法user，以便跳转到user.html:
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/user')
def user():
return render_template('user.html')
if __name__ == '__main__':
app.run(debug=True)
5. 接收JSON数据
编写addUser方法，接收网页发过来的JSON数据
@app.route('/addUser', methods=['POST'])
def login():
json = request.json
print('recv:', json)
return json
此处注意我们的返回值，也是json类型。
6. 测试
启动程序，访问http://127.0.0.1:5000/user，此时会显示user.html页面，效果如下：
点击按钮，Python控制台打印如下，已成功接收json数据。
recv: {'name': 'tom', 'password': '123456'}
1
查看控制台，输出如下，网页也已经成功接收到后台返回的数据。
7. 小结
本篇演示了如何使用Flask获取Ajax传输过来的JSON数据，还是相当简单的，直接通过request.json即可实现。