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实现类的静态变量用法实例
May 08 Python
python通过getopt模块如何获取执行的命令参数详解
Dec 29 Python
Python Socket编程之多线程聊天室
Jul 28 Python
Pandas之MultiIndex对象的示例详解
Jun 25 Python
python设计微型小说网站(基于Django+Bootstrap框架)
Jul 08 Python
将python包发布到PyPI和制作whl文件方式
Dec 25 Python
Python startswith()和endswith() 方法原理解析
Apr 28 Python
PyTorch在Windows环境搭建的方法步骤
May 12 Python
keras实现基于孪生网络的图片相似度计算方式
Jun 11 Python
详解Python中的编码问题(encoding与decode、str与bytes)
Sep 30 Python
安装Anaconda3及使用Jupyter的方法
Oct 27 Python
Python3爬虫RedisDump的安装步骤
Feb 20 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
精致的人儿就要挑杯子喝咖啡
2021/03/03 冲泡冲煮
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
php利用ZipArchive类操作文件的实例
2020/01/21 PHP
javascript IFrame 强制刷新代码
2009/07/23 Javascript
jquery对dom的操作常用方法整理
2013/06/25 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
json定义及jquery操作json的方法
2016/10/03 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
JS实现电商放大镜效果
2017/08/24 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
详解基于Vue/React项目的移动端适配方案
2019/08/23 Javascript
JavaScript中变量提升和函数提升的详解
2020/08/07 Javascript
[08:40]Navi Vs Newbee
2018/06/07 DOTA
python之wxPython菜单使用详解
2014/09/28 Python
详细介绍Python函数中的默认参数
2015/03/30 Python
python实现简单购物商城
2016/05/21 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
Django中多种重定向方法使用详解
2019/07/17 Python
Python descriptor(描述符)的实现
2020/11/15 Python
Python 无限级分类树状结构生成算法的实现
2021/01/21 Python
新奇的小玩意:IWOOT
2016/07/21 全球购物
预订奥兰多和佛罗里达州公园门票:FloridaTix
2018/01/03 全球购物
static关键字的用法
2013/10/07 面试题
给老师的检讨书
2014/02/11 职场文书
民族学专业大学生职业规划范文:清晰未来的构想
2014/09/20 职场文书
团队会宣传标语
2014/10/09 职场文书
2014年学校办公室工作总结
2014/12/19 职场文书
商务英语求职信范文
2015/03/19 职场文书
财务部岗位职责范本
2015/04/14 职场文书
机器人瓦力观后感
2015/06/12 职场文书
国际贸易实训总结
2015/08/03 职场文书
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
关于redisson缓存序列化几枚大坑说明
2021/08/04 Redis
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript