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连接mssql数据库编码问题解决方法
Jan 01 Python
python学习笔记之列表(list)与元组(tuple)详解
Nov 23 Python
Django 根据数据模型models创建数据表的实例
May 27 Python
Python编程图形库之Pillow使用方法讲解
Dec 28 Python
DRF跨域后端解决之django-cors-headers的使用
Jan 27 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
Jul 01 Python
对python 中re.sub,replace(),strip()的区别详解
Jul 22 Python
Django admin禁用编辑链接和添加删除操作详解
Nov 15 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
Feb 25 Python
将python字符串转化成长表达式的函数eval实例
May 11 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
Dec 14 Python
利用 Python 的 Pandas和 NumPy 库来清理数据
Apr 13 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中使用hidef扩展代替define提高性能
2015/04/09 PHP
php中10个不同等级压缩优化图片操作示例
2016/11/14 PHP
PHP面向对象学习之parent::关键字
2017/01/18 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
js 采用delete实现继承示例代码
2014/05/20 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
Ztree新增角色和编辑角色回显问题的解决
2016/10/25 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
vuejs绑定class和style样式
2017/04/11 Javascript
js实现音乐播放控制条
2017/09/09 Javascript
总结js函数相关知识点
2018/02/27 Javascript
react以create-react-app为基础创建项目
2018/03/14 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
2020/09/04 Javascript
在Python中使用NLTK库实现对词干的提取的教程
2015/04/08 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
Python requests模块实例用法
2019/02/11 Python
pybind11在Windows下的使用教程
2019/07/04 Python
python with语句的原理与用法详解
2020/03/30 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
python将数据插入数据库的代码分享
2020/08/16 Python
python 实现图片批量压缩的示例
2020/12/18 Python
一款纯css3实现的非常实用的鼠标悬停特效演示
2014/11/05 HTML / CSS
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
岗位廉洁从业承诺书
2014/03/28 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python