Python Flask:使用 POST 传递前后端参数

前言(碎碎念)

request的用法有很多呢,比如form、args、data、json、files、values啥的。

本文主要讲如何利用flask(后端)的request.post获取前端中form表单(即把前端数据传到后端),虽说request.get也能达到同样效果,但是一般情况post用的最多,所以本文主要探究post的方法啦

唠唠题外话

自这篇文章发布,也算是将近3个月没写技术类的文章了

哎,毕竟这东西费时费力:写文章并不像写代码一样,要必须把代码每一行的原理搞明白、讲出来;给文章的案例代码还经常报错…折腾着半天就过去了……

所以呢,这个网站以后还是以写生活随笔为主,计算机、编程类的文章嘛…就随缘吧(半年更www)

哦对了,我看网上教程我大多都看不懂,研究了半天,所以本文是根据我的理解而来的。我敢说本文是绝对的傻瓜式、胎教级的,就连幼儿园小朋友都会一目了然的!(自信)


准备

关于flask模块建站嘛,我去年写过一篇文章,里边提及安装flask环境和基础用法、搭建flask框架啥的,所以本文就不过多赘述了。对flask不了解的最好去看看哦

用flask框架搭建一个测试网站 – 阿草Mimosa的小屋 (loneapex.cn)


我用pycharm部署的flask环境

前端

我随便写了一个框架:

# 懒得自己写注释了,所以让copilot加了注释
# test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>-</title>
</head>
<body>
    <!-- 创建一个表单,当提交时,会向'/done'路由发送POST请求 -->
    <form method="post" action="/done">
        <!-- 创建一个下拉菜单供用户选择 -->
        <label>随便选选</label>
        <select name="name">
            <option value="我是人">我是人</option>
            <option value="我是人嘛?">我是人嘛?</option>
            <option value="我不是人">我不是人</option>
            <option value="我不是人嘛?">我不是人嘛?</option>
        </select>
        <!-- 创建一个文本输入框供用户输入 -->
        <label>随便写写</label>
        <input type="text" name="name2">
        <!-- 创建一个提交按钮 -->
        <input type="submit" value="提交">
    </form>
</body>
</html>

要注意的是,我们要把<form>表单中的数据传给python,但是form中的标签不限于input,也可以是select、textarea、checkbox等,但都在后端通过name属性获取其中的值。

form标签挺神奇的,其中method="post"代表使用post请求,反之get就是get呗

form标签中尤其注意action属性,它指定填写的表单数据发送到哪个页面。(必须与服务器的路由路径相匹配才能正确发送数据。)

比如我action的路径是/done,则说明把数据提交到/done路径中(或者说路由)了,所以在后端只需在/done路由获取form信息即可。

所以——

后端

# 依旧是copilot写的注释
# app.py
# 导入Flask模块和其他必需的模块
from flask import Flask, render_template, request, redirect

# 创建Flask应用实例
app = Flask(__name__)

# 定义路由为'/'的视图函数,这是访问网站的主页
@app.route('/')
def index():
    # 渲染并返回'test.html'模板
    return render_template('test.html')

# 定义路由为'/done'的视图函数,只接受POST方法
@app.route('/done', methods=['POST'])
def done():
    # 从表单中获取'name'和'name2'字段的数据
    name = request.form['name']
    name2 = request.form['name2']
    # 在服务器控制台打印这些数据
    print(name, name2)
    # 重定向回主页
    return redirect("/")

# 确保这是主脚本,并在调试模式下运行应用
if __name__ == '__main__':
    app.run(debug=True)

效果:

访问控制台的ip
控制台成功获取前端表单

get与post请求的区别

我问了一下copilot:

如果您在HTML表单中使用<form method="get" action="/done">,这将改变数据提交的方式。具体来说:

  • 当使用GET方法时,表单数据会附加到URL中,形成一个查询字符串。例如,如果用户在表单中输入了数据,提交后,浏览器会向服务器发送一个请求,URL可能看起来像这样:/done?name=用户输入的值&name2=另一个用户输入的值
  • GET方法通常用于请求数据,而不是提交数据。它适用于不涉及敏感信息的搜索或过滤操作。
  • 使用GET方法时,由于数据显示在URL中,因此用户可以将URL保存为书签或分享给他人。

总的来说,GET方法适用于那些不需要保密的数据提交,而POST方法则更适合需要保护数据不被轻易访问的情况。

不过嘛,如果你前端改了get,后端methods也得改成GET

后端给前端传参

flaskrender_template可以带参数传给前端,前端用{{}}接住就行了。

比如我想把我选择的内容传给后端,后端再传给前端,则可以这样:

done路由那儿,因为已经获取到了前端namename1了,再通过render_template传参即可

(redirect重定向好像不支持传参,所以只能放弃redirect而改为render_template了

@app.route('/done', methods=['POST'])
def done():
    # 从表单中获取'name'和'name2'字段的数据
    name = request.form['name']
    name2 = request.form['name2']
    # 在服务器控制台打印这些数据
    print(name, name2)

    # 把之前的重定向砍掉了
    # 没错,在最后加几个参数即可,a_name是给前端的变量名,name是后端的
    return render_template('test.html', a_name=name, a_name2=name2)

然后前端在form标签之外加上:

<p>君の选择:{{a_name}}{{ a_name2 }}</p>

(a_name、a_name2即为后端传递过来的内容,类似变量)

每次提交后端会传过来你的选择

over

所以,这篇文章就这点东西了

不过嘛,让我来说本篇的实际应用的话,我觉得用别人的api某些功能搞个网站,或者网页需要服务器处理一些数据时,应该能用上吧?

下篇文章打算讲讲mongoDB数据库,如何?

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯
 ̄﹃ ̄
(/ω\)
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
(´っω・`。)
( ,,´・ω・)ノ)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•)
(ㆆᴗㆆ)
有希酱最可爱啦!(素材来自bilibili@最上川下山)
整活by Mimosa233
Source: github.com/k4yt3x/flowerhd
galgame系列表情by Mimosa233
颜文字
周防有希
小恐龙
夸夸我!
花!
可愛い!
上一篇
下一篇