表单提交是前端与后端交互的基础方式，流程包括：用户点击提交按钮后，浏览器收集带name属性的输入字段，根据method决定使用GET（数据拼接在URL）或POST（数据放请求体），向action指定的URL发送请求；后端通过对应语言（如Node.js、Python Flask、PHP）解析参数并处理业务逻辑，返回响应；浏览器加载响应内容完成交互。可通过JavaScript拦截默认提交，使用fetch异步请求实现无刷新交互。
HTML本身没有“函数”这个概念，它是一种标记语言，负责页面结构。与后端进行数据交互主要通过表单（form）提交或使用JavaScript发起请求。下面重点讲解HTML表单提交的完整流程，以及如何与后端实现数据交互。
1. 表单的基本结构
一个典型的HTML表单如下：
说明：
- action：指定表单提交的目标URL（即后端接口）
- method：提交方式，常用POST或GET
- name属性：每个输入字段必须有name，否则数据不会被提交
2. 表单提交的完整流程
当用户点击“提交”按钮后，浏览器会执行以下步骤：
立即学习“前端免费学习笔记（深入）”；
- 收集所有具有name属性且未被禁用的输入字段（如input、textarea、select）
- 根据method属性决定请求方式：
- GET：将数据拼接在URL后面（查询字符串），例如：
/submit?username=abc&password=123 - POST：将数据放在请求体（body）中发送
- GET：将数据拼接在URL后面（查询字符串），例如：
- 浏览器跳转到action指定的URL，并发送请求
- 后端服务器接收请求，解析参数，处理业务逻辑（如登录验证、数据存储等）
- 后端返回响应（通常是HTML页面、重定向或JSON数据）
- 浏览器加载响应内容，完成一次交互
3. 后端如何接收数据
以常见后端语言为例：
-
Node.js（Express）：
app.post('/submit', (req, res) => {
const { username, password } = req.body;
// 处理数据
res.send('提交成功');
});
-
Python（Flask）：
@app.route('/submit', methods=['POST'])
def handle_submit():
username = request.form['username']
password = request.form['password']
return '提交成功'
-
PHP：
$username = $_POST['username'];
$password = $_POST['password'];
echo "提交成功";
4. 使用JavaScript增强交互（可选）
如果不想刷新页面，可以用JavaScript拦截表单提交，使用fetch或axios发送异步请求：
document.querySelector('form').addEventListener('submit', function(e) {e.preventDefault(); // 阻止默认提交行为
const formData = new FormData(this);
fetch('/submit', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(data => {
alert('提交成功');
});
});
这种方式不跳转页面，适合现代Web应用。
基本上就这些。表单提交是前端与后端交互的基础方式，理解其流程对开发至关重要。
