Python Flask前后端Ajax交互的方法示例


Posted in Python onJuly 31, 2018

之前总结过flask里的基础知识,现在来总结下flask里的前后端数据交互的知识,这里用的是Ajax

一、 post方法

1、post方法的位置:在前端HTML里,绑定在一个按钮的点击函数里,或者一个鼠标输入框点击离开事件。

(1)数据附在URL里(请求路径),发送到后端。

/*前端HTML<script>里:*/
$.post("/js_post/"+ip, data_to_backend, function(data){alert("success "+data)} );

其中ip,data_to_backend是在此代码前定义好的;data_to_backend一般是一个json数据(data_to_backend={'ip':$(this).parent().prev().text()}),而data是来自后端的返回数据。

#后端py文件(路由启动前面的html的py文件)里:添加一个路由处理前端post请求
@app.route("/js_post/<ip>", methods=['GET', 'POST'])
def js_post(ip):
   print ip
   return ip +" - ip"

点击按钮后的效果:

Python Flask前后端Ajax交互的方法示例

前端定义弹窗数据

Python Flask前后端Ajax交互的方法示例

ip在URL里

(2)数据单独发送给后端

var ip = $(this).parent().prev().prev().prev().prev().text();
data_tmp = {'ip':ip, 'text':"success for ajax"};  // data to send to server.
$.post('/js_call', data_tmp, function(data){alert(data)});

后端处理程序:

@app.route('/js_call', methods=['GET', 'POST'])
def js_call():  
   print request.values['ip']  
   print request.values['text']  
   # to send the command by ssh : os.system("ssh user@host \' restart(command) \' ")  
   return 'ok!!!!'

Python Flask前后端Ajax交互的方法示例

post独立数据发送

二、get方法(同样可以发数据)

$.get('/js_get', {'method':'GET', 'text':"from-html"}, function(data){alert(data)})

后端路由接收处理:

@app.route('/js_get', methods=['GET'])
def js_get():
  print "method: "+request.values['method']+" --- text: "+request.values['text']
  return "get success!"

Python Flask前后端Ajax交互的方法示例

get成功

Python Flask前后端Ajax交互的方法示例

数据接收成功

注意的是:其中后端py文件的类似request.values['method']的获取数据的request是一个Python flask的模块,需要导入。

总结:

  • 在flask框架里,Ajax请求对于后端可以很容易实现,只需在后端Python代码中对ajax路径作出处理即可。
  • Ajax的post, get方法均可以向后台发送数据,只是一般用post发数据(做出改变),get请求数据(不改变)。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
python with statement 进行文件操作指南
Aug 22 Python
用python写的一个wordpress的采集程序
Feb 27 Python
浅谈scrapy 的基本命令介绍
Jun 13 Python
Python学习笔记之open()函数打开文件路径报错问题
Apr 28 Python
python 3.7.0 安装配置方法图文教程
Aug 27 Python
浅谈解除装饰器作用(python3新增)
Oct 15 Python
python+opencv实现霍夫变换检测直线
Oct 23 Python
Python实现多态、协议和鸭子类型的代码详解
May 05 Python
python 图像处理画一个正弦函数代码实例
Sep 10 Python
Python List列表对象内置方法实例详解
Oct 22 Python
零基础小白多久能学会python
Jun 22 Python
Python3.7安装PyQt5 运行配置Pycharm的详细教程
Oct 15 Python
Python常见内置高效率函数用法示例
Jul 31 #Python
Python使用jsonpath-rw模块处理Json对象操作示例
Jul 31 #Python
flask-socketio实现WebSocket的方法
Jul 31 #Python
深入flask之异步非堵塞实现代码示例
Jul 31 #Python
Django框架使用富文本编辑器Uedit的方法分析
Jul 31 #Python
Windows下python3.6.4安装教程
Jul 31 #Python
windows下pycharm安装、创建文件、配置默认模板
Jul 31 #Python
You might like
mysql 搜索之简单应用
2007/04/27 PHP
用php实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
hessian 在PHP中的使用介绍
2010/12/13 PHP
如何用php获取程序执行的时间
2013/06/09 PHP
typecho插件编写教程(六):调用接口
2015/05/28 PHP
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
老生常谈php中传统验证与thinkphp框架(必看篇)
2017/06/10 PHP
JavaScript中的Document文档对象
2008/01/16 Javascript
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
juqery 学习之四 筛选查找
2010/11/30 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
jQuery提示效果代码分享
2014/11/20 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
2016/01/08 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
2017/05/20 jQuery
使用express搭建一个简单的查询服务器的方法
2018/02/09 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
vue 中固定导航栏的实例代码
2019/11/01 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
[01:14:30]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第二场 8.20.mp4
2019/08/22 DOTA
详解Python在七牛云平台的应用(一)
2017/12/05 Python
Python3实现从排序数组中删除重复项算法分析
2019/04/03 Python
Python项目打包成二进制的方法
2020/12/30 Python
python 实现网易邮箱邮件阅读和删除的辅助小脚本
2021/03/01 Python
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
乡镇纠风工作实施方案
2014/03/22 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
小学课外阅读总结
2014/07/09 职场文书
2014年教务处工作总结
2014/12/03 职场文书
2016年春节慰问信息
2015/03/25 职场文书
公司规章制度范本
2015/08/03 职场文书
小学生教师节广播稿
2015/08/19 职场文书
超越Nginx的Web服务器caddy优雅用法
2022/06/21 Servers