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生成随机mac地址的方法
Mar 16 Python
Python3 适合初学者学习的银行账户登录系统实例
Aug 08 Python
Python3实现的爬虫爬取数据并存入mysql数据库操作示例
Jun 06 Python
python实现简单的单变量线性回归方法
Nov 08 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
Jan 29 Python
Django使用unittest模块进行单元测试过程解析
Aug 02 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
Aug 26 Python
python3实现高效的端口扫描
Aug 31 Python
python+pygame实现坦克大战
Sep 10 Python
Python实现bilibili时间长度查询的示例代码
Jan 14 Python
pytorch掉坑记录:model.eval的作用说明
Jun 23 Python
利用python 读写csv文件
Sep 10 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
php权重计算方法代码分享
2014/01/09 PHP
php之Smarty模板使用方法示例详解
2014/07/08 PHP
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
php使用cookie保存用户登录的用户名实例
2015/01/26 PHP
使用php转义输出HTML到JavaScript
2015/03/27 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
Javascript 实用小技巧
2010/04/07 Javascript
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
2011/03/01 Javascript
不同Jquery版本引发的问题解决
2013/10/14 Javascript
js获取checkbox值的方法
2015/01/28 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
关于js里的this关键字的理解
2015/08/17 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
2019/01/27 jQuery
使用express获取微信小程序二维码小记
2019/05/21 Javascript
vue elementUI 表单校验功能之数组多层嵌套
2019/06/04 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
[01:54]TI4西雅图DOTA2选手欢迎晚宴 现场报道
2014/07/08 DOTA
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
详解从Django Rest Framework响应中删除空字段
2019/01/11 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
python通过文本在一个图中画多条线的实例
2020/02/21 Python
Python使用tkinter实现摇骰子小游戏功能的代码
2020/07/02 Python
部队万能检讨书
2014/02/20 职场文书
社区工作感言
2014/02/21 职场文书
勤俭节约倡议书
2014/04/14 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
音乐教师个人总结
2015/02/06 职场文书
项目合作意向书
2015/05/08 职场文书
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA