Python Flask 简明教程(12)--Flask获取Ajax传输的JSON数据

本文目录

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即可实现。


上一篇:JavaWeb学习之路(53)–CSS应用实例之布局


下一篇:CallBack