likes
comments
collection
share

Flask系列分享：路由的实现之 post 请求的使用（二）

作者站长头像
站长
· 阅读数 24

1. 了解post方法

POST是HTTP协议定义的一种请求方法，用于向指定资源提交要被处理的数据。与之对应的是GET请求方法，GET方法用于请求获取资源，而POST方法用于提交更新资源或者提交一些需要处理的数据。

POST请求通常在表单中进行，当用户在表单中填写完数据并点击提交按钮时，表单数据将会通过POST请求被发送至服务器，服务器根据数据进行处理，并响应客户端请求。

在POST请求中，请求参数被包含在请求的消息主体内，而不是在URL中进行传递，因此POST请求没有参数长度的限制，而且POST请求是安全的，因为参数不会被暴露在URL中。POST请求通常是通过表单进行提交的，但是也可以使用AJAX等技术进行提交。

来源于：blog.51cto.com/u_16213624/…

2. post 请求

由于 post 可以携带大量的数据和不同类型数据，而 get 请求只能传输单一的字符串类型数据和字符长度限制，所以直接在浏览器访问服务端地址，留浏览器都默认以 get 方式进行请求。这里我是使用 Apifox 来实现 post 请求。

如果想弄明白 post 的在 Flask 中的几种请求实现，可以看看

Flask系列分享：路由的实现之 get 请求的使用（一）-> 2.2 get 无参请求的另外两种实现

下面由于使用方便，都会使用 @app.post 装饰器来实现 post 请求。

2.1 无参请求

import os
from flask import Flask

app = Flask(os.gecwd())

if __name__ == "__main__":
    app.run(host="0.0.0.0", prox=9999, debug=True)
    
@app.post("/")
def index():
    return {"msg": "post 请求成功"}

Flask系列分享：路由的实现之 post 请求的使用（二）

2.2 post 地址栏有参请求

    ```
        在这里设置了下
        name: string 类型
        age: int 类型
    ```
@app.post("/add/<string:name>/<int:age>")
def index(name, age):
    return {"msg": f"post 请求成功, name: { name }, age: { age }"}

这里解释下，由于页面请求的端口和后端服务端口并不处于同一端口，所以浏览器报跨域问题。这里呢，就借助了 Flask render_template() 函数来渲染 html 内容了，保证页面和后端接口处于同一处。 下面给出 render_template() 实现的代码。

    from flask import render_template
    ```
        在 Falsk 中， 将 .html 文件放在根目录下的 templates 目录中，render_template 函数会去
    templates 文件夹中寻找 index.html 文件。
    ```
    @app.get("/index"):
    def index_html():
        return render_template("index.html")

Flask系列分享：路由的实现之 post 请求的使用（二）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/axios@1.7.2/dist/axios.min.js"></script>
  </head>
  <body>
    <div>
      <div>
        <label>
          姓名:
          <input type="text" id="iptName" value="小明" />
        </label>
        <br />
        <label>
          年龄:
          <input type="text" id="iptAge" value="18" />
        </label>
      </div>
      <button id="btn">请求数据</button>
      <div id="getData"></div>
    </div>
    <script>
      btn.onclick = async () => {
        getData.innerHTML = await axios
          .post(`/add/${iptName.value}/${iptAge.value}`)
          .then(
            (res) => res.data.msg,
            (err) => err.message
          );
      };
    </script>
  </body>
</html>

Flask系列分享：路由的实现之 post 请求的使用（二）

所以从上面可以看出，当年龄的值无法转为 int 类型时， 服务器就返回 404 报错信息了。

2.3 有参混合请求

@app.post("/add/<string:name>/<int:age>")
def index(name, age):
    return {
        "地址栏参数": f"name={name}, age={age}",
        "请求体参数": f"name={name}, age={age}",
    }

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/axios@1.7.2/dist/axios.min.js"></script>
  </head>
  <body>
    <div>
      <div>
        <label>
          姓名:
          <input type="text" id="iptName" value="小明" />
        </label>
        <br />
        <label>
          年龄:
          <input type="text" id="iptAge" value="18" />
        </label>
      </div>
      <button id="btn">请求数据</button>
      <div id="getData"></div>
    </div>
    <script>
      btn.onclick = async () => {
        getData.innerHTML = await axios
          .post(`/add/${iptName.value}/${iptAge.value}`, {
            province: "湖北",
            city: "武汉",
          })
          .then(
            (res) => {
              return Object.keys(res.data)
                .map((key) => `${key}:${res.data[key]}`)
                .join("<br/>");
            },
            (err) => err.message
          );
      };
    </script>
  </body>
</html>

Flask系列分享：路由的实现之 post 请求的使用（二）

可以看出在 Flask post 请求中这样混合传参， Flask 也能很好的处理，并成功响应。

下一章，着重一起学习 Flask post 各类数据类型的上传。

转载自:https://juejin.cn/post/7385132376584339493
评论
请登录