如何在Python(Aiohttp)中将HTML按钮与POST请求绑定

问题根源：你当前的HTML代码没有使用<form>标签包裹输入项和提交按钮，原生type="submit"属性的按钮只有在<form>标签内部时，才会自动触发表单提交请求。你用Postman能调通是因为直接手动构造了POST请求，前端页面没有对应提交逻辑自然触发不了后端POST处理函数。

第一步：修改add_user.html代码 #

把输入控件和提交按钮都包在<form>标签里，指定提交地址和请求方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Add user page</title>
</head>
<body>
    <div class="center">
        <h2> Hello, this is the register page!</h2>
        <p>Put your data here:</p>
        <!-- 新增form标签，action指定提交地址，method指定用POST方法提交 -->
        <form action="/add_user" method="POST">
            <input type="text" name="username" id="username" maxlength=30 minlength=3 placeholder="Username"><br>
            <input type="submit" name="submit" id="post" value="Register"><br>
        </form>
        <p>{{path}}</p>
    </div>
</body>
</html>

第二步（可选）：后端获取表单提交的数据 #

如果你需要拿到用户输入的用户名，修改AddUserView的post方法即可：

class AddUserView(View):
    async def post(self):
        # 获取表单提交的数据
        form_data = await self.request.post()
        username = form_data.get('username')
        # 这里写入库逻辑
        print(f'收到用户名：{username}')
        return Response(text='Everything is ok!')

    async def get(self):
        response = await add_user_handler(self.request)
        return response

改完重启服务，刷新页面点击Register按钮就能触发POST请求了。

内容的提问来源于stack exchange，提问作者Alexander Skakun