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中的Django框架中prefetch_related()函数对数据库查询的优化
Apr 01 Python
详解tensorflow载入数据的三种方式
Apr 24 Python
python使用正则筛选信用卡
Jan 27 Python
Python爬虫之UserAgent的使用实例
Feb 21 Python
python统计指定目录内文件的代码行数
Sep 19 Python
使用python模拟高斯分布例子
Dec 09 Python
django ajax发送post请求的两种方法
Jan 05 Python
浅谈pytorch、cuda、python的版本对齐问题
Jan 15 Python
pycharm设置python文件模板信息过程图解
Mar 10 Python
在 Pycharm 安装使用black的方法详解
Apr 02 Python
属性与 @property 方法让你的python更高效
Sep 21 Python
python Pexpect模块的使用
Dec 25 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 access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
PHP简单检测网址是否能够正常打开的方法
2016/09/04 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
PHP封装的mysqli数据库操作类示例
2019/02/16 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
基于JQuery的cookie插件
2010/04/07 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
JavaScript中toString()方法的使用详解
2015/06/05 Javascript
jquery实现的树形目录实例
2015/06/26 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
分享Angular http interceptors 拦截器使用(推荐)
2019/11/10 Javascript
es6 super关键字的理解与应用实例分析
2020/02/15 Javascript
antd配置config-overrides.js文件的操作
2020/10/31 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
[02:37]TI8勇士令状不朽珍藏II视频展示
2018/06/23 DOTA
用Python进行行为驱动开发的入门教程
2015/04/23 Python
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
django 将model转换为字典的方法示例
2018/10/16 Python
用Python画小女孩放风筝的示例
2019/11/23 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
Python文件操作方法详解
2020/02/09 Python
python爬虫爬取网页数据并解析数据
2020/09/18 Python
基于Python爬取股票数据过程详解
2020/10/21 Python
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
2019/04/29 HTML / CSS
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
给学校的建议书
2014/03/12 职场文书
卫生院义诊活动总结
2015/05/07 职场文书
检举信的写法
2019/04/10 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书
vue 实现上传组件
2021/05/31 Vue.js
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技