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 相关文章推荐
合并百度影音的离线数据( with python 2.3)
Aug 04 Python
Python读取系统文件夹内所有文件并统计数量的方法
Oct 23 Python
python为QT程序添加图标的方法详解
Mar 09 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
Jun 02 Python
Python如何优雅删除字符列表空字符及None元素
Jun 25 Python
python中查看.db文件中表格的名字及表格中的字段操作
Jul 07 Python
python3 循环读取excel文件并写入json操作
Jul 14 Python
如何利用python进行时间序列分析
Aug 04 Python
python生成xml时规定dtd实例方法
Sep 21 Python
python读取excel数据并且画图的实现示例
Feb 08 Python
基于PyTorch实现一个简单的CNN图像分类器
May 29 Python
4种方法python批量修改替换列表中元素
Apr 07 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
多文件上载系统完整版
2006/10/09 PHP
SMARTY学习手记
2007/01/04 PHP
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
thinkphp项目部署到Linux服务器上报错“模板不存在”如何解决
2016/04/27 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
javascript 原型继承介绍
2011/08/30 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
javascript 寻找错误方法整理
2014/06/15 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
checkbox批量选中,获取选中项的值的简单实例
2016/06/28 Javascript
Nodejs 获取时间加手机标识的32位标识实现代码
2017/03/07 NodeJs
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
微信小程序开发摇一摇功能
2019/11/22 Javascript
Element Backtop回到顶部的具体使用
2020/07/27 Javascript
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
线程安全及Python中的GIL原理分析
2019/10/29 Python
python反转列表的三种方式解析
2019/11/08 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
CSS3实现瀑布流布局与无限加载图片相册的实例代码
2016/12/22 HTML / CSS
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
房地产销售员的自我评价分享
2013/12/04 职场文书
生产班组长岗位职责
2014/01/05 职场文书
授权委托书样本
2014/04/03 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
介绍长城的导游词
2015/01/30 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书
浅谈MySql update会锁定哪些范围的数据
2022/06/25 MySQL