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的汉字转GBK码实现代码
Feb 19 Python
Python中使用异常处理来判断运行的操作系统平台方法
Jan 22 Python
python非递归全排列实现方法
Apr 10 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
Apr 11 Python
Python编程实现蚁群算法详解
Nov 13 Python
详解python 注释、变量、类型
Aug 10 Python
python 自定义异常和异常捕捉的方法
Oct 18 Python
python实现简易动态时钟
Nov 19 Python
pytorch实现seq2seq时对loss进行mask的方式
Feb 18 Python
python中strip(),lstrip(),rstrip()函数的使用讲解
Nov 17 Python
python 实现的截屏工具
May 08 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中smarty实现多模版网站的方法
2015/06/11 PHP
PHP解压ZIP文件到指定文件夹的方法
2016/11/17 PHP
详解php实现页面静态化原理
2017/06/21 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
JS 精确统计网站访问量的实例代码
2013/07/05 Javascript
jquery-syntax动态语法着色示例代码
2014/05/14 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
jQuery内存泄露解决办法
2016/12/13 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
nodejs acl的用户权限管理详解
2018/03/14 NodeJs
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
Vue.js实现的购物车功能详解
2019/01/27 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
Nest.js 授权验证的方法示例
2021/02/22 Javascript
Python的Flask开发框架简单上手笔记
2015/11/16 Python
Python计算斗牛游戏概率算法实例分析
2017/09/26 Python
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
python 二维数组90度旋转的方法
2019/01/28 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
jupyter notebook清除输出方式
2020/04/10 Python
地球鞋加拿大官网:Earth Shoes Canada
2020/11/17 全球购物
教师开学感言
2014/02/14 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
助残日活动总结
2014/08/27 职场文书
公司股东合作协议书
2014/09/14 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
小兵张嘎观后感300字
2015/06/03 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL