Flask使用ajax进行前后端交互

ajax前后端交互的使用已经非常普及了，这种数据交互方式比表单提交数据带给用户的使用体验更好一些。同时，利用ajax交互时数据传输一般使用json，我们可以很方便的管理我们所需要的数据。只需要定义好数据格式，可以前后端分离开发。

我们这里改一下之前图片上传的代码，使用ajax方式上传图片。

html表单：

<div style="width:100px;float:left;margin-left:35px;"><form method="post" enctype="multipart/form-data" id="test_form" style="margin-top:45px;"><a href="javascript:;" class="file button red">选择照片<input type="file" name="photo" id="photo"></a><a type="button" class="file button red" id="tj" οnclick="ajaxForm()">上传照片</a><a class="file button red" data-reveal-id="myModal">手动裁剪</a></form></div>

Js代码：

function ajaxForm(){var form= new FormData(document.getElementById("test_form"));$.ajax({url:"{{ url_for('api_upload') }}",type:"post",data:form,dataType: 'json',processData:false,contentType:false,success:function(data){$(img_url_new).attr("src",data.img_url_new);$(imgPic).attr("src",data.img_url_new);},error:function(e){alert("error");}})
}

注意，需要引入jquery。

data为获取的表单数据，以json格式通过post方法传入后台，成功后从后台获取数据data，失败则弹出error。

后台接收代码：

@app.route('/up_photo', methods=['POST'], strict_slashes=False)
def api_upload():file_dir = os.path.join(basedir, app.config['UPLOAD_FOLDER'])if not os.path.exists(file_dir):os.makedirs(file_dir)f = request.files['photo']if f and allowed_file(f.filename):fname = secure_filename(f.filename)ext = fname.rsplit('.', 1)[1]new_filename = Pic_str().create_uuid() + '.' + extprint new_filenamef.save(os.path.join(file_dir, new_filename))img_url = ip+'show/'+new_filenameimg_url_new = ip+'show/'+new_filename  #处理后的图片，假数据return jsonify({"success": 200, "msg": "上传成功", "img_url": img_url, "img_url_new": img_url_new})else:return jsonify({"error": 1001, "msg": "上传失败"})

通过上传图片的小例子我们大概了解了Flask使用ajax交互的基本方式，下面通过一个更加符合ajax使用场景的例子来加深理解它。

如，有这样一个场景，我们希望鼠标点击图片时将点击坐标传入后台，这时就必须使用ajax来实现了。

html页面代码：

<div id="myModal" class="reveal-modal"><h1>点击选择裁剪坐标</h1><div class="uploader blue"><img id="imgPic" src="{{ url_for('static', filename='img/1.jpg') }}" οnclick="Show(this)" style="width:300px;height:270px;"/>X:<input id="xxx" type="text" style="width:30px;"/>  Y:<input id="yyy" type="text" style="width:30px;"/></div><a class="close-reveal-modal">×</a></div>

js代码：

<!--获取图片坐标-->function mousePosition(ev){if(ev.pageX || ev.pageY){return {x:ev.pageX, y:ev.pageY};}return {x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop  - document.body.clientTop};}function mouseMove(ev){ev = ev || window.event;var mousePos = mousePosition(ev);document.getElementById('xxx').value = mousePos.x;document.getElementById('yyy').value = mousePos.y;}document.onmousemove = mouseMove;function Show(el){var x = parseInt(document.getElementById('xxx').value)-el.offsetLeft;var y = parseInt(document.getElementById('yyy').value)-el.offsetTop;var data= {data: JSON.stringify({'x': x,'y': y}),}$.ajax({url:"{{ url_for('img_operate') }}",type:"post",data:data,dataType: 'json',success:function(data){//成功后的一些操作},error:function(e){alert("error");}})}

注意，我们这里通过json格式将数据传入后台：

var data= {data: JSON.stringify({'x': x,'y': y}),}

那么后台如何接收x、y轴坐标呢？

data = json.loads(request.form.get('data'))x = data['x']y = data['y']

以上为接收ajax前台传入数据的方法，后台路由方法完整代码：

# 坐标操作图片处理的按钮路由
@app.route('/img_operate', methods=['POST'])
def img_operate():data = json.loads(request.form.get('data'))x = data['x']y = data['y']print(x)print(y)img = 'http://localhost:5000/static/img/1.jpg'return jsonify({"success": 200, "img": img, "x": x, "y": y})

以上这些介绍了ajax前后台交互的基本方法。

Flask使用ajax进行前后端交互相关推荐

使用Ajax进行前后端交互（一）
实现我们需要做好准备工作本章涉及到的架包有: jackson-annotations-2.9.8.jar jackson-core-2.9.8.jar jackson-databind-2.9.8. ...
JavaScript 学习笔记（八）前后端交互；Ajax进行前后端交互
目录一.前后端二.前后端接口三.Ajax 1. ajax接口步骤 2. 返回为json格式四.请求方式五.案例:登录一.前后端前端:用户可以看见的界面,我们一般浏览网页时看到的界面,展现 ...
ajax+node前后端交互学习笔记（1）
大致理解前后端交互的概念当你去餐馆吃饭的时候,坐下后服务员会带着⼀个菜单过来,问你需要点什么菜,这个时候你浏览了菜单上的菜,把想吃的菜告诉服务员,服务员把你点的菜拿到后台,后台根据你点的菜名,逐⼀ ...
struts2、ajax实现前后端交互
跳过struts2环境搭建部分,或者可以看我的博客(http://www.cnblogs.com/zhangky/p/8436472.html),里面有写,很详细. 需要导入的jar包(struts官 ...
【前端】前后端交互重点Ajaxの介绍及实战
❤️Ajax❤️ 每篇前言: 第一部分:JSON简介效果展示: 第二部分:前后交互 1.此处介绍前后交互的两种方式: (1)利用form表单里的name属性进行前后端交互 HTML代码: Pytho ...
Python前后端交互（ Flask Ajax ）
本文是自己学习Python前后端交互记录使用,之前没有学习过Python任何框架,前端也是简单学了一下,如哪里有问题,还望大家批评改正. 1. 前端 1.1 HTML布局这个就不用说啥了,登录长啥样 ...
flask前后端交互
目录前端 index.html script.js 后端 app.py 场景:按下按钮,将左边的下拉选框内容发送给后端,后端再将返回的结果传给前端显示. 按下按钮之前: 按下按钮之后: 代码结构这 ...
ajax学习----json，前后端交互，ajax
json <script>var obj = {"name": "xiaopo","age": 18,"gender& ...
html 和jsp 引入jquery_不用jsp怎么实现前后端交互？给萌新后端的ajax教程(1)
众所周知jsp是已经入土的技术,虽然仍有不少老项目在用,但已经不值得花时间学习了,当然了解一下也是可以的.如果你是一位萌新后端,不想了解jsp,或者想做一个前后端分离的项目,想在纯html网页上实现前 ...

Flask使用ajax进行前后端交互

Flask使用ajax进行前后端交互相关推荐

最新文章

热门文章