关键词：
flask 实现ajax 数据入库
在正式编写前需要了解一下如何在 python 函数中去判断，一个请求是 get 还是 post。
python 文件代码如此所示：
# route()方法用于设定路由；
@app.route('/hello.html', methods=['GET', 'POST'])
def hello_world():
if request.method == 'GET':
# args = request.args
return render_template('hello.html')
if request.method == "POST":
print("POST请求")
上述代码通过 requests.method 属性判断当前请求类型，然后实现相应的逻辑。
注意上述内容中的 @app.route('/hello.html', methods=['GET', 'POST']) ，绑定的方法由参数 methods 决定。
HTML 页面代码如下所示：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>这是第一个HTML页面</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
name
<input type="button" value="点击发送请求" id="btn" />
<script>
$(function()
$('#btn').on('click', function()
alert($(this).val());
);
)
</script>
</body>
</html>
在 HTML 页面中提前导入 jquery 的 CDN 配置，便于后续实现模拟请求操作。
再次完善一些 POST 请求的相关参数判断，通过 requests.form 获取表单参数。
# route()方法用于设定路由；
@app.route('/hello.html', methods=['GET', 'POST'])
def hello_world():
if request.method == 'GET':
args = request.args
name = args.get('name')
return render_template('hello.html',name=name)
if request.method == "POST":
print("POST请求")
arges = request.form
print(arges)
return "PPP"
同步修改一下前端请求部分，这里改造主要需要的是前端知识。
<body>
name
<input type="button" value="点击发送请求" id="btn" />
<script>
$(function()
$('#btn').on('click', function()
//alert($(this).val());
$.post('./hello.html', function(result)
console.log(result);
)
);
)
</script>
</body>
测试的时候同步开启浏览器的开发者工具，并且切换到网络请求视图，查看请求与返回数据。
数据传递到后台之后，只需要使用上一篇博客涉及的内容即可将数据存储到 MySQL 中。
实现文件上传
了解了POST请求之后，就可以通过该模式实现文件上传操作了。
优先修改 HTML 页面，实现一个文件选择按钮。
<input type="file" id="file" />
<script type="text/javascript">
$(function()
$('#btn').on('click', function()
//alert($(this).val());
$.post('./hello.html', function(result)
console.log(result);
)
);
var get_file = document.getElementById("file");
get_file.onchange = function(e)
file = e.currentTarget.files[0]; //所有文件，返回一个数组
var form_data = new FormData();
form_data.append("file", file);
console.log(form_data);
form_data.append("file_name", e.currentTarget.files[0].name);
$.ajax(
url: '/upload',
type: 'post',
data: form_data,
contentType: false,
processData: false,
success: function(res)
console.log(res.data);
);
)
</script>
服务端处理文件的代码如下所示
@app.route('/upload', methods=['POST'], strict_slashes=False)
def upload():
if request.method == "POST":
print("POST请求")
file = request.files.get('file')
name = request.form.get('file_name')
print(name)
file.save("./"+name)
# print(name)
return "PPP"
这里需要注意的是如果 Python 端存在BUG，前端的AJAX请求会出现 400或者500错误。
文件名通过前端传递 file_name 参数获取。
本案例可以扩展上传成功之后，返回JSON数据到前端进行后续处理。
项目在实测的过程中发现一个问题，在读取前台传递的文件流时，需要使用 request.files.get() 方法实现，而不能用 request.form['参数名'] 。
记录时间
2022年度 Flag，写作的 574 / 1024 篇。
可以关注我，点赞我、评论我、收藏我啦。
更多精彩
fastdfs研究
...，点击上传图片2、图片上传至文件系统服务，文件系统请求fastDFS上传文件3、文件系统将文件入库，存储到文件系统服务数据库中。4、文件系统服务向前端返回文件上传结果，如果成功则包括文件的Url路径。5、后台管理前端请... 查看详情
一文吃透接口调用神器resttemplate(代码片段)
...2.2、关键代码位置2.3、如何运行测试用例？3、发送Get请求3.1、普通请求3.2、url中含有动态参数3.3、接口返回值为泛型3.4、下载小文件3.5、下载大文件3.6、传递头3.7、综合案例：含头、url动态参数4、POST请求4.1、post请求常... 查看详情
一文搞定requestparam注解传参,map数组文件(一)
参考技术A该annotation用来绑定servlet请求参数到控制器的方法参数中。包括查询数据，表单数据，以及多部分文件。用来定义返回的媒体类型以及编码方式，如“text/plain;charset=UTF-8”以文本类型并以UTF-8编码返回，以下例子如无特... 查看详情
微信小程序一文带你搞懂小程序的页面配置和网络数据请求(代码片段)
...文件的作用页面配置和全局配置的关系页面配置网络数据请求网络数据请求的限制配置request合法域名发起get/post请求在页面刚加载时请求数据跳过request合法域名校验关于跨域和ajax请求页面配置每个小程序页面都有一个.json文件&#... 查看详情
一文概述文件上传漏洞
什么是文件上传？文件上传：它指的是计算机中的一个专有名词，是客户端将文件传输到服务器端的过程叫“文件上传”。文件上传分为web上传和ftp上传web上传是指通过浏览器进行的... 查看详情
一文看懂分布式存储架构
...的种类和比较三、分布式理论浅析1、一致性和可用性2、数据分布3、复制4、分布式协议5、跨机房部署四、分布式文件系统1、Google文件系统（GFS）2、Taobao文件系统（TFS）3、FackbookHaystack文件系统4、CDN内容分发网络... 查看详情
使用请求上传文件并发送额外数据
】使用请求上传文件并发送额外数据【英文标题】：Uploadingfilesusingrequestsandsendextradata【发布时间】：2012-10-1211:35:54【问题描述】：我正在尝试使用requests上传文件。我需要上传一个PDF文件，同时将一些其他数据发送到表单中，比... 查看详情
springmvc获得请求数据--文件上传（单/多文件上传）(代码片段)
springmvc–文件上传和下载1.文件上传1.1文件上传客户端三要素1.2文件上传原理1.3单文件上传步骤1.3.1导入fileupload和io坐标pom.xml<dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifact 查看详情
drf的解析器和渲染器
...据解析成自己想要的数据类型的过程解析器的本质就是对请求体重的数据进行解析django的解析器请求进来请求体中的数据在request.body中，那也就证明，解析器会把解析好的数据放入request.body我们在视图中可以打印request的类型，... 查看详情
python请求上传带有附加数据的大文件
】python请求上传带有附加数据的大文件【英文标题】：pythonrequestsuploadlargefilewithadditionaldata【发布时间】：2016-06-1705:36:31【问题描述】：我一直在寻找上传带有附加数据的大文件的方法，但似乎没有任何解决方案。要上传文件，... 查看详情
git上传大文件(代码片段)
...几个体积超过100M的第三方框架，这样导致在提交代码入库时，会被拒绝，以GitHub为例，单个文件超过50M入库会警告，超过100M会不然入库。解决方案1、将单个文件大于100M的文件不入库GitHub官方解决方案gitrm--cac... 查看详情
nsurlsession的文件上传
...传的步骤：（1）确定上传路径（2）创建“可变”请求对象（3）修改请求方法为POST --设置请求头信息，告诉服务器这是一个文件上传请求 --按照固定的格式拼接数据（4）设置请求体信息（文件参数）（5）... 查看详情
一文看懂reacthooks
...，组件的状态共享是一件很麻烦的事情，而ReactHook只共享数据处理逻辑，并不会共享数据本身，因此也就不需要关心数据与 查看详情
volley源码分析之自定义multipartrequest（文件上传）
...来文件上传的案例：1.传送数据到服务器，必定是使用POST请求：//设置请求方式为posthttpURLConnection.setDoOutput(true);httpURLConnection.setR 查看详情
如何使用multipart/form-data格式上传文件
...器端发送数据。因为上传文件实质上也是向服务器端发送请求。第三，客户端按照符合“multipart/form-data”的格式向服务器端发送数据。 既然Multipart/form-data格式就是浏览器用表单提交数据的格式，我们就来看看文件经过浏览器... 查看详情
文件的上传
10.1文件上传步骤（1）确定请求路径（2）根据URL创建一个可变的请求对象（3）设置请求对象，修改请求方式为POST（4）设置请求头，告诉服务器我们将要上传文件（Content-Type）（5）设置请求体（在请求体中按照既定的格式拼接... 查看详情
没基础，也可一文看懂python中的csv模块(代码片段)
...on内置模块csv。一文看懂csvcsv（Comma-SeparatedValues）文件是什么？python中的csv文件清晰解法读取文件写入文件csv文件其它说明csv（Comma-SeparatedValues）文件是什么？它是一种文件格式，一 查看详情
multer解析文件上传
Express默认并不处理HTTP请求体中的数据，对于普通请求体(JSON、二进制、字符串)数据，可以使用body-parser中间件。而文件上传(multipart/form-data请求)，可以基于请求流处理，也可以使用formidable模块或Multer中间件。1.multer中间件Multer... 查看详情