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的Urllib库的一些高级用法
Apr 30 Python
Python增量循环删除MySQL表数据的方法
Sep 23 Python
关于Python面向对象编程的知识点总结
Feb 14 Python
基于python socketserver框架全面解析
Sep 21 Python
python3学习之Splash的安装与实例教程
Jul 09 Python
简单了解python字符串前面加r,u的含义
Dec 26 Python
在Pytorch中计算自己模型的FLOPs方式
Dec 30 Python
如何基于python实现归一化处理
Jan 20 Python
python 在sql语句中使用%s,%d,%f说明
Jun 06 Python
浅谈tensorflow 中的图片读取和裁剪方式
Jun 30 Python
python mongo 向数据中的数组类型新增数据操作
Dec 05 Python
Python中非常使用的6种基本变量的操作与技巧
Mar 22 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实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
php cc攻击代码与防范方法
2012/10/18 PHP
php多文件上传功能实现原理及代码
2013/04/18 PHP
php数组合并与拆分实例分析
2015/06/12 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
javascript实现的DES加密示例
2013/10/30 Javascript
js控制文本框输入的字符类型方法汇总
2015/06/19 Javascript
JS模拟实现Select效果代码
2015/09/24 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
简述Matlab中size()函数的用法
2016/03/20 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
2016/12/13 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
zTree异步加载展开第一级节点的实现方法
2017/09/05 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
实例学习JavaScript读取和写入cookie
2018/01/29 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
2020/04/27 Javascript
Node.js API详解之 assert模块用法实例分析
2020/05/26 Javascript
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
跟老齐学Python之复习if语句
2014/10/02 Python
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
python批量修改文件编码格式的方法
2018/05/31 Python
Python实现多线程下载脚本的示例代码
2020/04/03 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
基于python和flask实现http接口过程解析
2020/06/15 Python
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
linux面试题参考答案(11)
2012/05/01 面试题
优秀管理者获奖感言
2014/02/17 职场文书
高中运动会前导词
2015/07/20 职场文书
科级干部培训心得体会
2016/01/06 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书