基于python-flask搭建后台，HTML+CSS+JS（jQuery）写前端的web全栈开发（三）——3.2 普通按钮点击事件与后台交互
在上一篇文章，我们讲解了基于插件实现的上传图片到后台处理，并将处理后得到的结果图与原图在前端显示。
主要idea是将图片先在后台进行缓存，我们传回两张图片的途径，在file的done函数中对标签的src属性进行更新。
但是这样子存在一个问题，就是后台“static/temp/left(right)”文件夹里的图片会越来越多。
这时候就是那个submit按钮起作用了！我们先将得到的两个路径filepath和pilepath_用‘&’合并在一起，暂时存储在一个不可见的标签中，当submit被点击时，将两个途径传回后台，后台函数接收路径并对对应路径的文件做删除remove。
……
……
// javascript
$('#fileupload').fileupload{
...
done.function(e, data){
document.getElementById('temp').value = filepath + "&" + filepath_;
}
...
}上一次我们已经定义了额外的submit按钮，现在我们要使用它。
1. 在后台即sketch.py中新定义函数delete()
@app.route('/delete', methods=['POST','GET'])
def delete():
# do something
return render_template('demo.html')同样我们要注意路由的设置，我们假设这一次的交互是在一个隐藏的页面“http://127.0.0.1:5000/delete/”实现的。
2. 前端“submit”标签与后端函数绑定
因为我们使用ajax进行数据传输，因此可以这样子做——
$('#submit').on("click", function () {
$('#progress .progress-bar').css(
'width',
0 + '%'
);// 这里实现了当我们点击submit按钮后让进度条重新归0
var filepath_ = document.getElementById('temp').value;// 获取刚刚存储在temp（text）上的数值
// try to delete the original images
var data = {
'path': filepath_.split("&")[0],
'path_': filepath_.split("&")[1]
}// 对字符串做分割，并通过建立字典data进行分装
$.ajax({
type: 'GET',
url:'{{ url_for("delete") }}',// 这里就实现了函数与html标签的绑定！！！
data: data, // 要传给后台的数据
dataType: 'json', // 数据格式
success: function(data){ // 当成功返回数据到后台并成功获取后台返回的数据时，采取的动作在success函数中定义，与前面的done是类似的
}
});
});3. 完善后台delete()函数
@app.route('/delete', methods=['POST','GET'])
def delete():
path = request.args.get('path') # 因为数据是通过键值对匹配的，还记得前面data的两个键值对吗？
path_ = request.args.get('path_') # 通过“键”获取对应的“值”
if os.path.isfile(path): # 先判断文件是否存在，若是，才可以有remove的意义
os.remove(path)
if os.path.isfile(path_):
os.remove(path_)
return render_template('demo.html') # 停留在本页面总结
在本文我们是分享了如何实现普通按钮的click函数实现指定元素的value/text/innerHTML等的往后台的传送。
对比上一篇博文，关于uploadfiles的实现，其大体思路还是比较相似的，即
1）定义html标签
2）重写该标签的功能函数，如file的uploadfile函数，button的onclick函数
3）通过定义新的url进行与后端函数的绑定
4）用js或jQuery代码获取并处理前台的相关数据，用字典进行封装
5）后台接收包含数据的字典data，通过“键”获取“值”
结束语
好的，本专题至此也已全部结束，这边是上周小编所学到的东西，虽然微不足道，但十分有趣。
最后再一次感谢各位伙伴的支持和不吝赐教！