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

简介: 本文目录1. 前言2. 创建项目结构3. 发起Ajax请求4. 编写app.py5. 接收JSON数据6. 测试7. 小结

本文目录

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


目录
打赏
0
0
0
0
464
分享
相关文章
Python 中调用 DeepSeek-R1 API的方法介绍,图文教程
本教程详细介绍了如何使用 Python 调用 DeepSeek 的 R1 大模型 API,适合编程新手。首先登录 DeepSeek 控制台获取 API Key,安装 Python 和 requests 库后,编写基础调用代码并运行。文末包含常见问题解答和更简单的可视化调用方法,建议收藏备用。 原文链接:[如何使用 Python 调用 DeepSeek-R1 API?](https://apifox.com/apiskills/how-to-call-the-deepseek-r1-api-using-python/)
如何在Python中高效实现CSV到JSON的数据转换
在实际项目中,数据格式转换是常见问题,尤其从CSV到JSON的转换。本文深入探讨了多种转换方法,涵盖Python基础实现、数据预处理、错误处理、性能优化及调试验证技巧。通过分块处理、并行处理等手段提升大文件转换效率,并介绍如何封装为命令行工具或Web API,实现自动化批量处理。关键点包括基础实现、数据清洗、异常捕获、性能优化和单元测试,确保转换流程稳定高效。
115 82
【新手必看】PyCharm2025 免费下载安装配置教程+Python环境搭建、图文并茂全副武装学起来才嗖嗖的快,绝对最详细!
PyCharm是由JetBrains开发的Python集成开发环境(IDE),专为Python开发者设计,支持Web开发、调试、语法高亮、项目管理、代码跳转、智能提示、自动完成、单元测试和版本控制等功能。它有专业版、教育版和社区版三个版本,其中社区版免费且适合个人和小型团队使用,包含基本的Python开发功能。安装PyCharm前需先安装Python解释器,并配置环境变量。通过简单的步骤即可在PyCharm中创建并运行Python项目,如输出“Hello World”。
220 13
【新手必看】PyCharm2025 免费下载安装配置教程+Python环境搭建、图文并茂全副武装学起来才嗖嗖的快,绝对最详细!
关于商品详情 API 接口 JSON 格式返回数据解析的示例
本文介绍商品详情API接口返回的JSON数据解析。最外层为`product`对象,包含商品基本信息(如id、name、price)、分类信息(category)、图片(images)、属性(attributes)、用户评价(reviews)、库存(stock)和卖家信息(seller)。每个字段详细描述了商品的不同方面,帮助开发者准确提取和展示数据。具体结构和字段含义需结合实际业务需求和API文档理解。
淘宝商品评论数据API接口详解及JSON示例返回
淘宝商品评论数据API接口是淘宝开放平台提供的一项服务,旨在帮助开发者通过编程方式获取淘宝商品的评论数据。这些数据包括评论内容、评论时间、评论者信息、评分等,对于电商分析、用户行为研究、竞品分析等领域都具有极高的价值。
|
1月前
|
解析电商商品详情API接口系列,json数据示例参考
电商商品详情API接口是电商平台的重要组成部分,提供了商品的详细信息,支持用户进行商品浏览和购买决策。通过合理的API设计和优化,可以提升系统性能和用户体验。希望本文的解析和示例能够为开发者提供参考,帮助构建高效、可靠的电商系统。
47 12
使用Python和Flask构建简易Web API
使用Python和Flask构建简易Web API
194 3
利用Python和Flask构建轻量级Web应用的实战指南
利用Python和Flask构建轻量级Web应用的实战指南
193 2
如何使用Python和Flask构建一个简单的RESTful API。Flask是一个轻量级的Web框架
本文介绍了如何使用Python和Flask构建一个简单的RESTful API。Flask是一个轻量级的Web框架,适合小型项目和微服务。文章从环境准备、创建基本Flask应用、定义资源和路由、请求和响应处理、错误处理等方面进行了详细说明,并提供了示例代码。通过这些步骤,读者可以快速上手构建自己的RESTful API。
265 2
构建RESTful APIs:使用Python和Flask
构建RESTful APIs:使用Python和Flask
52 1

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等