当前位置：首页 > article >正文

前端表单提交与后端处理全解析：从HTML到Axios与SpringBoot实战

article 2025/3/9 12:54:21

前端表单提交与后端处理全解析：从HTML到Axios与SpringBoot实战

一、GET与POST请求的两种面孔

1. HTML表单基础实现

<!-- GET请求示例：搜索表单 -->
<form action="/api/search" method="GET">
  <input type="text" name="keyword" value="手机">
  <input type="number" name="page" value="1">
  <button type="submit">搜索</button>
</form>
<!-- 提交后URL: /api/search?keyword=手机&page=1 -->

<!-- POST请求示例：登录表单 -->
<form action="/api/login" method="POST">
  <input type="text" name="username" value="john">
  <input type="password" name="password" value="123456">
  <button type="submit">登录</button>
</form>
<!-- 提交后URL: /api/login 请求体: username=john&password=123456 -->
<!-- 默认会加上Content-Type: application/x-www-form-urlencoded -->

2. Axios实现方式

// GET请求
axios.get('/api/search', {
   
  params: {
    keyword: '手机', page: 1 } // 自动拼接URL参数(axiso内部会检查params对象的类型)
});

// POST请求
const params = new URLSearchParams();
params.append('username', 'john');
params.append('password', '123456');
axios.post('/api/login